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

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

这是我的.html文件：

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

这是我的.vue文件：

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

---

这里有两个不同的Vue实例。直接使用

new Vue

创建的一个具有名为

msg

的属性。与子组件相对应的实例，

模态组件

，没有

Vue中有3种主要的属性类型<代码>数据，

计算

和

道具

如果在

数据中的父对象上定义了属性，则可以使用道具将其传递给子对象



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

props:['msg']

属性不是自动继承的，您始终需要使用道具将它们传递下去

文件：

如果不想弄脏水域，使用
槽
可能会更好地提供这个特定示例，但由于它只是一个示例，很难确定这是否真的合适

更新：

完整的文件
test.vue
将是：


{{msg}
导出默认值{
名称：'模态组件'，
道具：['msg']
}
您需要在
modal component
的js文件中定义
msg
，或者为模型组件添加一个道具并将msg绑定到它。您的问题中缺少模型组件的Javascript文件。缺少代码：在
添加
导出默认值{data:（）=>{return{msg:“我的消息”}；}}
下，谢谢！我已经尝试了您所建议的方法—使用道具将消息正确地传递给孩子—它的值msg（'Hello world！'）现在附加到section元素，如下所示：
/code>。但是，我的p标签仍然是空的。如何在p标记中显示msg数据？看起来您还没有在子项上声明道具。如果没有声明prop，它将被视为元素上的一个属性。您的Vue文件中需要一个合适的
部分，包括
道具：['msg']
。很抱歉，我不明白，我有点困惑！“你能举例说明你的意思吗？”JamesAnderson更新。我建议你读一读。从您的问题中也不清楚为什么要使用
httpVueLoader
，尽管这并没有改变我的答案。如果您是Vue新手，我强烈建议您获取CLI工具的副本并自动生成一个框架项目。
<template>
    <section>               
        <p class="test">{{ msg }}</p>
    </section>
</template>

[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.