Question

我正在尝试将数据从其父.js文件加载到.vue组件文件中。

这是我的.html文件：

<div class="modal-container">
    <section class="modal">
        <modal-component></modal-component>
    </section>
</div>

这是我的.js文件：

var modal = new Vue({
    el: 'section.modal',
    data: {
        msg: 'Hello world!'
    },
    components: {
        'modal-component': httpVueLoader('./templates/test.vue')
    }
});

这是我的.vue文件：

<template>
    <section>               
        <p class="test">{{ msg }}</p>
    </section>
</template>

但是，当我加载页面时，此错误出现在控制台中，并且'msg'的值为空白：

[Vue warn]: Property or method "msg" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Answer 1

这里有两个不同的Vue实例在玩。您直接使用create table api_product(description text, lang regconfig); create index on api_product using gin (to_tsvector(lang, description)); insert into api_product VALUES ('the description', 'english');创建的一个具有名为new Vue的属性。与子组件msg对应的实例不存在。

Vue中有3种主要类型的属性。 modal-component，data和computed。

如果您在props的父级上定义了一个属性，则可以使用道具将其传递给子级。

data

然后，您需要在<modal-component :msg="msg"></modal-component>文件中将.vue定义为道具。

msg

属性不会自动继承，您始终需要使用props传递它们。

文档：https://vuejs.org/v2/guide/components.html#Passing-Data-to-Child-Components-with-Props

在不希望弄混水的情况下，使用props: ['msg']可能会更好地满足此特定示例的要求，但是由于它只是一个示例，因此很难确定这是否真的合适。

更新：

完整的文件slot为：

test.vue

如何将数据从.js传递到.vue？

1 个答案: