组件通信方案

发布时间 2023-10-09 15:29:37作者: 嘎嘎鸭2

组件通信是指 组件与组件 之间的数据传递。

组件的数据是独立的,无法直接访问其他组件的数据,想用其他组件的数据,需要通过组件通信方案。

 

组件关系分类:父子关系、非父子关系

 

组件通信方案:

父子关系:props(父传子) 和 $emit(子传父)

非父子关系:① provide & inject

                      ② eventbus

父子关系 与 非父子关系 的通用通信方案:Vuex(适合复杂业务场景)

 

详细演示:

1. 父子关系:

①父组件中给 template 中引入的组件标签 添加属性的方式 传值(fuData 为父组件的 data 函数中定义的变量)

   <Son   :title = "fuData"></Son>   

②子组件中 通过 props 进行接收

<script>

export  default  {

      props : [ 'title' ]   // 属性名 title 要与 父组件 中 给子组件标签添加的属性值 title 保持一致

}

</script>