使用 VueJs 使用 props 初始化应用程序组件

Question

我将 VueJs 与 VueCli 一起使用，并且我想根据将传递给我的主 App 组件的启动的“源”参数加载 CSS 文件。

我想在索引文件中像这样初始化我的组件：Main.js：

import Vue from 'vue'
import App from './App'
import router from './router'
import VueLadda from 'vue-ladda'
import VueResource from 'vue-resource'
import VModal from 'vue-js-modal'
import BootstrapVue from 'bootstrap-vue'

Vue.use(VModal);
Vue.use(BootstrapVue);

Vue.use(VueResource);
Vue.config.productionTip = false
Vue.component('vue-ladda', VueLadda)

new Vue({
  el: '#app',
  props: ['source'],
  router,
  render: h => h(App)
})

这里是我的 App 组件（App.vue）

<script>
export default {
  name: 'App',
  props: ['source'],
  data: function () {
    return {
    }
  },
  mounted: function () {
    console.log(this.source)
  }
}
</script>

但我变得不确定。有人会知道为什么吗？

Answer 1

您不是在根组件上传递道具，而是注册道具名称 source。

您可以在渲染函数的createElement别名h函数本身中传递道具

new Vue({
  el: '#app',
  props: ['source'],
  router,
  render: h => h(App, {props:{ source:' source prop'}})
})

或者您可以将渲染选项替换为模板选项以将道具传递给 App.vue

new Vue({
  el: '#app',
  props: ['source'],
  router,
  components:{App},
  template: '<App source="source prop"/>'
})