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

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

中添加了这一行

运行时编译器：真

...一切正常

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 props 未定义

Vue props is undefined when print component dynamically

javascript

undefined

prop

dinamico

vue.js