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

【问题标题】：Vue props is undefined when print component dynamically动态打印组件时Vue props未定义
【发布时间】：2020-07-30 14:40:34
【问题描述】：

我的问题是动态创建标签“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 中添加了这一行

runtimeCompiler: 是的

...一切正常

【问题讨论】：

您拥有的道具绑定到根元素。您没有向 Gi 组件提供道具
你没有使用模板语法，而是直接使用渲染函数有什么原因吗？

标签： javascript vue.js undefined prop dinamico

【解决方案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 函数没有任何好处。

【讨论】：

应用修复后...返回：您正在使用仅运行时构建的 Vue，其中模板编译器不可用。要么将模板预编译成渲染函数，要么使用编译器包含的构建。
@ErikBasañez 是的，这就是我在回答的最后一段中所指的。请参阅vuejs.org/v2/guide/… 了解更多信息。您要么需要切换到包含编译器的构建，要么使用我建议的render 函数版本。如果您使用的是 CLI，那么您可以在 vue.config.js 中使用 runtimeCompiler: true 启用编译器，请参阅 cli.vuejs.org/config/#runtimecompiler

【解决方案2】：

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

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

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

【讨论】：

我已经更改了我的代码来应用你的修复。返回：您正在使用仅运行时构建的 Vue，其中模板编译器不可用。要么将模板预编译为渲染函数，要么使用编译器包含的构建。