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

【问题标题】：Init app component with props using VueJs使用 VueJs 使用 props 初始化应用程序组件
【发布时间】：2018-11-18 06:59:28
【问题描述】：

我将 VueJs 与 VueCli 一起使用，我想根据“源”参数加载一个 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>

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

【问题讨论】：

如何指定source参数？您希望在控制台中看到什么值？
在 index.html
在控制台中我会跳到看到“foo”

标签： vue.js vue-component vue-cli

【解决方案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"/>'
})

【讨论】：

但是在这种情况下，它似乎不是动态的？我希望我可以用不同的来源实例化我的组件应用程序。一次使用 'foo'，另一次使用 'bar' 类似
或
然后使用v-bind动态绑定

【解决方案2】：

App.vue 中的模板简单如下：

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

【讨论】：

【解决方案3】：

如果我理解正确，这听起来是个坏主意。道具用于创建动态数据的反应管道，以更新 dom。指向脚本和样式表的链接不像其他 dom 内容，并且动态加载 css requires special treatment。您不能只是动态更改 href。

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

【讨论】：

事实上，我必须创建一个组件，供几个不同的提供者使用。所有逻辑都是相同的，但对于每个提供者，我必须能够使用不同的样式表。他们只需要包含我的构建文件以及带有“源”参数的 div。因此，在伪装者 'foo' 处，他将不得不使用 source = 'foo' 插入我的组件来加载好的样式表
确实，一旦恢复了source参数，我会在组件使用上一个链接中提到的技术挂载后加载CSS