vue2父子组件传值（vue父子组件传值emit）

在

Vue

2中，

父子 组件 之间

可以通过props和事件来实现实时

传值

。

1. 使用props：父

组件

可以通过props向

子 组件

传递数据，

子 组件

可以通过props接收并使用这些数据。当父

组件

的数据更新时，

子 组件

会自动更新。

父

组件

：

 vue <template> <div> <p>父 组件 数据：{{ parentData }}</p> <child-component :childData="parentData"></child-component> </div> </template>  <script> import ChildComponent from 'https://blog.csdn.net/_/article/details/ChildComponent. vue ';  export default { data() { return { parentData: '父 组件 初始数据', }; }, components: { ChildComponent, }, }; </script> 

子 组件

：

 vue <template> <div> <p> 子 组件 数据：{{ childData }}</p> </div> </template>  <script> export default { props: { childData: { type: String, required: true, }, }, }; </script> 

2. 使用事件：

子 组件

可以通过$emit触发自定义事件，并将数据传递给父

组件

。父

组件

可以通过监听

子 组件

的自定义事件来获取

子 组件

传递的数据。

父

组件

：

 vue <template> <div> <p>父 组件 数据：{{ parentData }}</p> <child-component @updateData="updateParentData"></child-component> </div> </template>  <script> import ChildComponent from 'https://blog.csdn.net/_/article/details/ChildComponent. vue ';  export default { data() { return { parentData: '父 组件 初始数据', }; }, components: { ChildComponent, }, methods: { updateParentData(childData) { this.parentData = childData; }, }, }; </script> 

子 组件

：

 vue <template> <div> <button @click="updateData">更新父 组件 数据</button> </div> </template>  <script> export default { methods: { updateData() { const childData = ' 子 组件 数据'; this.$emit('updateData', childData); }, }, }; </script> 

通过以上两种方式，

父子 组件 之间

可以实现实时

传值

。在props方式下，父

组件

的数据更新会自动反映到

子 组件

上；在事件方式下，

子 组件

通过$emit触发自定义事件，父

组件

通过监听事件来获取

子 组件

传递的数据并更新父

组件

的数据。

到此这篇vue2父子组件传值（vue父子组件传值emit）的文章就介绍到这了,更多相关内容请继续浏览下面的相关 推荐文章，希望大家都能在编程的领域有一番成就！

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/36098.html