002.(常规)组件通信

Posted 2021-07-22 Ruovan

常规组件通信

• • • 01. 父组件 --> 子组件
    • • （1）属性props
      • （2）引用refs
      • （3）子元素$children
    • 02. 子组件 --> 父组件
    • • （1）$emit
      • （2）父元素$parent
    • 03. 兄弟组件之间
    • • （1）共同祖辈搭桥
      • （2）事件总线
      • （3）Vuex

---

01. 父组件 --> 子组件

（1）属性props

• 方法

  • 父组件：在子组件标签上，通过属性绑定传递参数
  • 子组件：通过props属性接收父组件传递的参数

• 注意：

  • props是单向绑定的：当父组件的属性变化时，将影响子组件，反过来不会
  • props中的数据都是只读的，无法进行重新赋值

  <!-- 父组件 -->
  <!-- 在子组件标签中添加子组件props中创建的属性, 把需要传给子组件的值赋给该属性 -->
  <!-- 
  	注意：如果不使用 v-bind 绑定属性，则默认传递的都是 字符串
  	所以，想传递其它类型的参数，都需要使用 v-bind 属性绑定
  	使用 v-bind 可以将 props 作为 javascript 进行解析
  -->
  <mycom parent-msg='pmsg' :content='hello' :num="1" :flag="false"></mycom>
  
  <!-- 子组件 -->
  <!-- 子组件通过props属性接收参数 -->
  <script>
      export default {
          // 通过数组的形式接收这些参数
          props: ['parentMsg', 'content'],
          // 通过对象的形式接收这些参数
          props: {
              parentMsg: {
                  type: String,
                  required: true,
                  default: ''
              },
              content: {
                  type: Array,
                  default: () => [] // 如果参数是对象，需要函数的形式，原因见data为什么是函数
              }
          }
      }
  </script>
  

（2）引用refs

• 在子组件上注册引用信息

  <!-- 父组件里：在子组件的实例上添加 ref -->
  <son ref="fatherRef"></son>
  
  <!-- 然后使用 -->
  <script>
      export default {
          mounted(){
              this.$refs.fatherRef.属性 = 修改
          }
      }
  </script>
  

（3）子元素$children

• 通过$children可以获取父组件内所有子组件的数组

  如果有多个子组件，因为无法确定子组件在数组中的顺序，所以不建议

  // 父组件里：通过  this.$children  可以获取 子组件数组(因为可能有多个子组件)
  this.$children[0].属性 = 修改
  

02. 子组件 --> 父组件

（1）$emit

• 方法

  • 父组件：在子组件标签上监听该自定义事件，并添加一个响应该事件的处理方法
  • 子组件：触发一个自定义事件，并通过$emit派发给父组件，可以将需要传递的值作为第二个参数传递给父组件

  <!-- 父组件 -->
  <!-- 通过 v-o n监听来自子组件的事件 receive, 并使用自定义事件 handleEvent 来响应 -->
  <child @receive="handleEvent"></child>
  <script>
      export default {
          methods: {
              // 定义在子组件中通过 this.$emit() 调用的方法
              handleEvent(val) {
                  console.log("父组件收到的消息是：",val)
              }
          }
      }
  </script>
  
  <!-- 子组件 -->
  <!-- 点击事件触发自定义事件 receive,并通过$emit派发给父组件，第二个参数为传递参数 -->
  <button @click="sendMessage()">发送</button>
  <script>
      export default {
          methods: {
              sendMessage() { // 按钮的点击事件
                  this.$emit("receive","父组件您好，我是子组件！") // 调用父组件传递过来的方法，并且把数据传递出去
              }
          }
      }
  </script>
  

（2）父元素$parent

• 可以通过$parent来访问父组件里的属性

  this.$parent.属性
  

---

在组件传值过程中，无论是父传子、还是子传父，它们都有一个共同点就是有一个中间介质。父传子的介质是props中的属性，子传父的介质是自定义事件。

父子组件的关系可以总结为prop向下传递，事件向上传递。父组件通过prop给子组件下发数据，子组件通过事件给父组件发送信息。

在组件的最底层开始写事件，由最底层组件逐步向上$emit事件流，并携带相应参数，最后在父组件内完成总的数据处理。

03. 兄弟组件之间

（1）共同祖辈搭桥

• 通过共同祖辈搭桥： $parent 或者 $root

  • 适用于有共同祖辈的，且层级不深的
  • 原理同事件总线

  // 兄弟组件1
  this.$parent.$on('foo', handle)
  
  // 兄弟组件2
  this.$parent.$emit('foo')
  

（2）事件总线

• 创建一个新的Vue实例负责事件派发、监听和回调管理

  • 在组件A中传出值：通过$emit传值

  • 在组件B中接收值：通过$on接收

  // 事件总线，通过一个新的Vue实例进行通信
  Vue.prototype.$bus = new Vue()
  
  
  <template>
  	<div @click="onfocus"></div>
  </template>
  
  <script>
      import New from '@/new.js'
      export default{
          methods:{
              onfocus:function(fromid){
                  New.$emit('getisshow',{
                      show:true
                  })
              }
          }
      }
  </script>
  
  <script>    
      import New from '@/new.js'
      export default{
          created(){
              New.$on('getisshow',data => {
                  console.log(data)  //{show:true}
              })
          }
      }
  </script>
  

（3）Vuex

• （详情看后续）