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

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 实例。您直接使用new Vue 创建的那个有一个名为msg 的属性。子组件modal-component对应的实例没有。

Vue 中有 3 种主要类型的属性。 data、computed 和 props。

如果您在 data 的父级上定义了一个属性，那么您可以使用 prop 将其传递给子级。

<modal-component :msg="msg"></modal-component>

在您的.vue 文件中，您需要将msg 定义为一个道具。

props: ['msg']

属性不会自动继承，你总是需要使用 props 来传递它们。

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

不想搅浑水，使用slot 可能会更好地服务于这个特定示例，但由于它只是一个示例，因此很难确定这是否真的合适。

更新：

完整的文件test.vue 将是：

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

<script>
export default {
  name: 'modal-component',
  props: ['msg']
}
</script>