Question

我的问题是动态创建TAG“ 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

<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中添加了这一行

runtimeCompiler：是

...而且一切正常

Answer 1

您写h(Gi)的地方是创建一个galeriaimages组件，但没有传递任何道具。

要通过道具，您需要编写：

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

但是，我怀疑那不是您真正想做的。

您当前似乎正在直接安装到<galeriaimages>元素上，这有点奇怪，但是如果删除render函数，它应该可以工作。您也可以使用el代替$mount：

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

我要补充一点，大多数示例为根Vue实例使用render函数的原因是，它避免了在Vue构建中包括模板编译器的需要。仅当您所有其他Vue组件都是预构建的.vue文件时，此方法才有效。如果在运行时有任何模板，包括HTML中的模板，则无论如何都需要包括模板编译器。在这种情况下，在根实例上使用render函数没有任何好处。

Answer 2

您需要提供与标签<galeriaimages>相匹配的组件。您的自定义渲染功能将覆盖模板解析，因此不会将<galeriaimages>解析为组件标签。

    new Vue({vuetify, components: {galeriaimages: Gi} }).$mount('galeriaimages');

您的组件也没有创建任何元素。他们无法安装。

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

2 个答案: