Javascript 动态打印组件时未定义Vue道具

我的问题是动态创建标记“galeriaimages”。 Vue工作正常，但道具始终未定义

谢谢大家

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

Vue组件

<script>

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

导出默认值{
道具：['p1']，
数据：函数（）{
返回{
}
},
已创建：函数（）{
警报（this.p1）；//这始终是未定义的
}
}

感谢@shirtle给我答案：-）

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

运行时编译器：true

---

…而且一切正常

您编写的

h（Gi）

代码创建了一个

galeriaimages

组件，但没有向其传递任何道具

要通过道具，您需要写：

newvue({
vuetify，
render:h=>h（Gi，{props:{p1:'awesome'}）
}).$mount（'galeriaimages'）；

然而，我怀疑这不是你真正想要做的

您当前似乎直接挂载到

元素，这有点奇怪，但是如果删除

render

函数，它应该可以工作。您也可以使用

el

代替

$mount

：

newvue({
vuetify，
组件：{galeriaimages:Gi}，
el:“Galeria图像”
});

---

我想补充一点，大多数示例对根Vue实例使用

render

函数的原因是它避免了在Vue构建中包含模板编译器的需要。仅当所有其他Vue组件都是预构建的

.Vue

文件时，此选项才有效。如果在运行时有任何模板，包括HTML中的模板，那么无论如何都需要包含模板编译器。在这种情况下，在根实例上使用

render

函数没有任何好处。

您需要提供与标记匹配的组件

。自定义呈现函数正在覆盖模板解析，因此它不会将

作为组件标记进行解析

newvue（{vuetify，组件：{galeriaimages:Gi}）。$mount（'galeriaimages'）；

---

此外，您的组件没有创建任何元素。它们无法挂载。

您的道具已绑定到根元素。您没有为Gi组件提供道具，这是您没有使用模板语法并直接使用渲染功能的原因吗？我已经使用您的修复程序更改了代码。Return：在模板编译器不可用的情况下，您使用的是仅运行时版本的Vue。将模板预编译为呈现函数，或使用包含编译器的生成。应用修复程序后…返回：您使用的是Vue的仅运行时生成，而模板编译器不可用。要么将模板预编译成呈现函数，要么使用编译器附带的版本。@ErikBasañez Yep，这就是我在回答的最后一段中提到的。有关更多信息，请参阅。您要么需要切换到包含编译器的构建，要么使用我建议的

render

函数版本。如果您正在使用CLI，则可以在

vue.config.js

中使用

runtimeCompiler:true

启用编译器，请参阅

<script>

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