javascript - 动态打印组件时，Vue props 未定义

Question

我的问题是动态创建标签“galeriaimages”。 Vue 工作正常，但 props 总是未定义

谢谢大家。

main.js

import Vue from 'vue'
import Gi from './components/galeriaimages.vue'
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false

document.addEventListener('DOMContentLoaded', function() {
    new Vue({vuetify, render: h => h(Gi) }).$mount('galeriaimages');
});

HTML

<galeriaimages p1="awesome" /> <!-- I create it dinamically-->

Vue组件

<script>

export default {
    props: ['p1'] ,
    data: function() {
        return {
        }
    },
    created: function() {
        alert(this.p1); //this is always undefined
    }
}

感谢@skirtle给我答案:-)

我在 vue.config.js 中添加了这一行

运行时编译器:true

...一切正常

Answer 1

你写h(Gi)的位正在创建 galeriaimages组件但不向其传递任何 Prop 。

要传递 Prop ，您需要编写:

new Vue({
  vuetify,
  render: h => h(Gi, {props: {p1: 'awesome'}})
}).$mount('galeriaimages');

但是，我怀疑这并不是您真正想要做的。

您当前似乎直接安装到 <galeriaimages>元素，这有点奇怪，但如果删除 render它应该起作用的功能。您还可以使用el而不是$mount :

new Vue({
  vuetify,
  components: {galeriaimages: Gi},
  el: 'galeriaimages'
});

我想补充一点，大多数示例使用 render 的原因根 Vue 实例的功能在于它避免了在 Vue 构建中包含模板编译器的需要。仅当所有其他 Vue 组件均已预先构建时，这才有效 .vue文件。如果您在运行时有任何模板(包括 HTML 中的模板)，那么无论如何您都需要包含模板编译器。在这种情况下，使用 render 没有任何好处。在根实例上运行。