使用 VueJs 使用 props 初始化应用程序组件 [英] Init app component with props using VueJs

问题描述

我将 VueJs 与 VueCli 一起使用，我想根据将传递给我的主要应用程序组件的启动的源"参数加载一个 CSS 文件.

I use VueJs with VueCli, and I would like to load a CSS file according to a "source" parameter that would be passed to the initiation of my main App component.

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

I would like to initialize my component like this in the index file: 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.vue)

Here my App component (App.vue)

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

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

But I get undifined. Someone would have an idea why?

推荐答案

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

You are not passing props on the root component, you are registering a prop name source.

您可以在渲染函数的createElement 别名 h 函数本身

You can pass props in the render function's createElement alias h function itself

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

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

Or you can replace the render option with a template option to pass props to App.vue

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

这篇关于使用 VueJs 使用 props 初始化应用程序组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！