2022-12-20【技术】Vue2的12种组件通信(上)

Vue2.x 组件通信方式

Vue2.x 组件通信共有12种

props
$emit / v-on
.sync
v-model
ref
parent
listeners
provide / inject
EventBus
Vuex
$root
slot

父子组件通信可以用：

props
$emit / v-on
listeners ref
.sync v-model
parent

跨层级组件通信可以用：

provide/inject
EventBus
Vuex
listeners
$root

Vue2.x 通信使用写法

下面把每一种组件通信方式的写法一一列出

1、props

父组件向子组件传送数据，这应该是最常用的方式了
子组件接收到数据之后，**不能直接修改**父组件的数据。会报错，所以当父组件重新渲染时，数据会被覆盖。如果子组件内要修改的话推荐使用 computed



// Child.vue 接收
export default {
  // 写法一 用数组接收
  props:['msg'],
  // 写法二 用对象接收，可以限定接收的数据类型、设置默认值、验证等
  props:{
      msg:{
          type:String,
          default:'这是默认数据'
      }
  },
  mounted(){
      console.log(this.msg)
  },
}

2、sync

可以帮我们实现父组件向子组件传递的数据的双向绑定，所以子组件接收到数据后可以直接修改，并且会同时修改父组件的数据。

// Parent.vue
        
        
        
        // Child.vue

3、v-model

和 .sync 类似，可以实现将父组件传给子组件的数据为双向绑定，子组件通过 $emit 修改父组件的数据

// Parent.vue

4、ref

ref 如果在普通的DOM元素上，引用指向的就是该DOM元素;
如果在子组件上，引用的指向就是子组件实例，然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法。

// Child.vue
        export default {
            data(){
                return {
                    name:"小赵"
                }
            },
            methods:{
                someMethod(msg){
                    console.log(msg)
                }
            }
        }
        
        // Parent.vue

用ref 注册子组件，父组件可以通过this.$refs.xx.fn调用子组件里的函数，但是有时会出现 fn 为定义的情况，这是为什么呢？

vue 官网中ref 下有一段话 "关于 ref 注册时间的重要说明：因为 ref 本身是作为渲染结果被创建的，在初始渲染的时候你不能访问它们 - 它们还不存在！$refs 也不是响应式的，因此你不应该试图用它在模板中做数据绑定。"

也就是说 ref 只有等页面加载完成好之后你才能调用 this.refs 的，所以要等到页面渲染之后拿才可以

解决办法：

1、如果你在mounted里获取this.$refs，因为dom还未完全加载，所以你是拿不到的， update阶段则是完成了数据更新到 DOM 的阶段(对加载回来的数据进行处理)，此时，就可以使用this.$refs了

2、如果写在method中，那么可以使用 this.$nextTick(() => {}) 等页面渲染好再调用，这样就可以了

3、或者加个定时器延时加载this.$refs（这个方法还没有试）。

拓展：

通过 on 绑定事件 (比v-on更灵活)

//父组件

 

 
//子组件

5、$emit / v-on

子组件通过派发事件的方式给父组件数据，或者触发父组件更新等操作。

// Child.vue 派发
        
        
        
        // Parent.vue 响应
        
        
        export default {
            methods:{
                getChildMsg(msg){
                    console.log(msg) // 这是父组件接收到的消息
                }
            }
        }

6、listeners

多层嵌套组件传递数据时，如果只是传递数据，而不做中间处理的话就可以用这个，比如父组件向孙子组件传递数据时。

attrs：包含父作用域里除class和style除外的非props属性集合。通过this.attrs 获取父作用域中所有符合条件的属性集合，然后还要继续传给子组件内部的其他组件，就可以通过 v-bind="$attrs"

listeners：包含父作用域里.native除外的监听事件集合。如果还要继续传给子组件内部的其他组件，就可以通过v−on="linteners"使用方式是相同的。

// Parent.vue
        
            // 继续传给孙子组件
            
        
        export default{
            props:["name"], // 这里可以接收，也可以不接收
            mounted(){
                // 如果props接收了name 就是 { title:1111 }，否则就是{ name:"小赵", title:1111 }
                console.log(this.$attrs)
            }
        }