0

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

运行时编译器：真

...一切正常

4

2 回答 2

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'
});

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

于 2020-04-17T08:20:58.190 回答
0

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

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

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

于 2020-04-17T08:21:24.800 回答