组件通信方案、父传子、子传父

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

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

 

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

 

组件通信方案：

父子关系：props（父传子） 和 $emit（子传父）

非父子关系：① provide & inject

                      ② eventbus

父子关系 与 非父子关系 的通用通信方案：Vuex（适合复杂业务场景）

 

详细演示：

1. 父子关系——父传子：

①父组件中给 template 中引入的组件标签 添加属性的方式 传值（myTitle 为父组件的 data 函数中定义的变量，如：myTitle = ' 黑马程序员 '）

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

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

<script>

export  default  {

      props : [ 'title' ]   // 属性名 title 要与 父组件 中 给子组件标签添加的属性值 title 保持一致，表示接受过来的是 黑马程序员

}

</script>

③子组件中渲染使用

<template>

      <div>

            {{ title }}

      </div>

</template>

 

2. 父子关系——子传父：

子组件利用 $emit 通知父组件，进行修改更新：子组件中可以准备一个按钮，在按钮的点击事件里，通过 $emit 来触发事件，给父组件发送消息通知；一旦发送了消息通知之后，父组件需要对子组件所发送的消息进行监听，比如子组件的 $emit 中起名叫 changeTitle，那么父组件就需要对 changeTitle 进行监听，监听的目的就是为了收到传过来的消息，并且父组件提供一个处理函数，在处理函数的形参中就可以拿到传过来的消息，拿到后就可以更新到 myTitle 里面去了。

 

①子组件中定义按钮，注册点击事件，点击事件中通过 $emit 向父组件发送消息通知：

<button @click="changeFn">修改title</button>

---------------------------------------------------------------------

export default {

  props: ['title'],

  methods: {

    changeFn(){

      this.$emit('changeTitle', '传智教育')   // 事件名自定义成 changeTitle，我们想要把父组件的 myTitle 变量的值 由 黑马程序员 改成 传智教育

    }

  }

}

 

②父组件对消息进行监听

// changeTitle：跟子组件中自定义的事件名 同名；handleChange：父组件的处理函数，名字自定义，然后在父组件的methods中实现该函数的逻辑，在形参中就可以拿到 传智教育，再更新到myTitle 里。

<Son  :title="myTitle"  @changeTitle="handleChange"></Son>   

-----------------------------------------------------------------------------------------

methods: {

        handleChange(newTitle){

          this.myTitle = newTitle

        }

      }