Vue的组件通信(父传子、子传父、兄弟组件通信)

最新推荐文章于 2024-03-14 17:39:59 发布

zhangxlY~

最新推荐文章于 2024-03-14 17:39:59 发布

阅读量1.4k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/m0_57142556/article/details/117044028

版权

本文详细介绍了Vue框架中组件间的通信方式，包括①父组件如何向子组件传递数据，②子组件如何将数据反馈回父组件，以及③兄弟组件之间的通信策略。对于父传子，讲解了通过props单向传递数据的方法；子传父则通过子组件触发自定义事件传递信息给父组件；兄弟组件通信则利用全局的$bus进行事件监听和触发，实现数据交换。

摘要由CSDN通过智能技术生成

Vue的组件通信：①父传子、②子传父、③兄弟组件通信

①父传子

父组件传到子组件数据是单向流动的,(子组件中修改props数据,是无效的，会有个红色的警告，如果确实需要修改,可以用计算属性,或者把数据赋值给子组件data里的一个变量);

在父组件中给子组件标签绑定一个属性，属性上挂载需要传输的变量，在子组件通过props来接受数据，props可以是数组也可以是对象，接受的数据可以直接使用props:['属性名']、props:{属性名:数据类型};

(1) 父组件parent.vue代码是：

 <template>
   <div class="parent">
     <h2>{
  { msg }}</h2>
     <son :fa-msg="msg"></son> <!-- 子组件绑定faMsg变量,注意驼峰-->
 </div>
 </template>
 <script>
 import son from './Son' //引入子组件
 export default {
   name: 'HelloWorld',
   data () {
     return {
       msg: '父组件',
     }
   },
   components:{son},
 }
 </script>