Question

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

我想在索引文件中初始化我的组件： 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'}})
})

或者您可以使用模板选项替换render选项以将props传递给App.vue

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

Answer 2

App.vue中的模板很简单：

<template>
  <div id="app" source="mySource">
          <router-view/>
  </div>
</template>

Answer 3

如果我理解你，这听起来不错。道具用于创建动态数据的反应管道，以更新dom。脚本和样式表的链接与其他dom内容不同，并且动态加载css requires special treatment。你不能随时改变href。

你为什么要这样做？必须有一个更清洁的方式。

使用VueJs的道具的初始app组件

3 个答案: