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

Vue2.x 组件通信方式

Vue2.x 组件通信共有12种

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

父子组件通信可以用：

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

跨层级组件通信可以用：

provide/inject
EventBus
Vuex
$attrs /$ listeners
$root

Vue2.x 通信使用写法

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

1、props

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

<template>
    <child :msg="msg"></child>
</template>

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

2、sync

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

// Parent.vue
        <template>
            <child :page.sync="page"></child>
        </template>
        <script>
        export default {
            data(){
                return {
                    page:1
                }
            }
        }
        </script>
        
        // Child.vue
        <template>
            <el-button @click="open()">点击我改变页面数</el-button>
            <div>当前页码数:{{currentPage}}</div>
        </template>
        <script>
        export default {
            props:["page"],
            computed: {
                // 当我们在子组件里修改 currentPage 时，父组件的 page 也会随之改变
                currentPage: {
                      get(){
                          return this.page
                      },
                      set(newVal){
                          this.$emit("update:page", newVal)
                      }
                  }
            },
            methods: {
              open(){
                  this.currentPage = 10
              },
          }
        }
        </script>

3、v-model

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

// Parent.vue
        <template>
            <child v-model="value"></child>
            <div>父组件:{{value}}</div>
        </template>
        <script>
        export default {
            data(){
                return {
                    value:1
                }
            }
        }
        
        // Child.vue
        <template>
            <input :value="value" @input="handlerChange">
            <div>子组件: {{value}}</div>
        </template>
        export default {
            props:["value"],
            // 可以修改事件名，默认为 input
            model:{
                event:"updateValue"
            },
            methods:{
                handlerChange(e){
                    this.$emit("input", e.target.value)
                    // 如果有上面的重命名就是这样
                    this.$emit("updateValue", e.target.value)
                }
            }
        }
        </script>

4、ref

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

// Child.vue
        export default {
            data(){
                return {
                    name:"小赵"
                }
            },
            methods:{
                someMethod(msg){
                    console.log(msg)
                }
            }
        }
        
        // Parent.vue
        <template>
            <child ref="childFlag"></child>
        </template>
        <script>
        export default {
            mounted(){
                const childData = this.$refs.childFlag
                console.log(childData.name) // 小赵
                childData.someMethod("调用了子组件的方法")
            }
        }
        </script>

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

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

也就是说 ref 只有等页面加载完成好之后你才能调用 this. $refs ，如果你使用v-if 、v-for渲染页面的话，那么在刚开始页面没没渲染之前你是拿不到this.$ refs 的，所以要等到页面渲染之后拿才可以

解决办法：

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

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

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

拓展：

通过 $refs 结合$ on 绑定事件 (比v-on更灵活)

//父组件
<template>
  <div id="app">
    <Student ref="student"></Student>
  </div>
</template>
 
<script>
import Student from './components/student.vue'
console.log(Student)
 
export default {
  name: 'App',
  components: {
    Student
  },
  mounted () {
    this.$refs.student.$on('knowSomething', this.doSomething) //给student组件绑定自定义事件
    /*
    this.$refs.student.$on('knowSomething', this.doSomething) //doSomething函数中的this指向
    的是父组件App组件
    
    this.$refs.student.$on('knowSomething', () =>{
     这里的this指向的是父组件App组件
    })
    
    this.$refs.student.$on('knowSomething', function(){
      这里的this指向的是触发knowSomething事件的组件
    })
    
    */
    //this.$refs.student.$once('knowSomething', this.doSomething) //绑定自定义事件，
    但是只能触发一次
    
  },
  methods: {
    doSomething (name, something) {
      alert('APP知道了学生' + name + '在' + something)
    }
  }
}
</script>
 
//子组件
<template>
  <div>
    <div>{{ student.name }}--{{ student.age }}</div>
    <button @click="tellApp">tellApp</button>
    <button @click="unbind">解绑knowSomething事件</button>
    
  </div>
</template>
 
<script>
export default {
  data () {
    return {
      student: {
        name: '张三',
        age: '18'
      }
    }
  },
  methods: {
    tellApp () {
      this.$emit('knowSomething', this.student.name, '学习')
    },
    unbind(){
    this.$off('knowSomething') //解绑knowSomething事件
    /*
    this.$off(['knowSomething','a','b']) //解绑多个事件
    this.$off() //解绑所有事件
    */
    }
  }
}
</script>

5、$emit / v-on

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

// Child.vue 派发
        <template>
          <div>
              <el-button @click="handleClick()">点击派发</el-button>
          </div>
        </template>
        
        <script>
        export default {
          data(){
              return { msg: "这是发给父组件的信息" }
          },
          methods: {
              handleClick(){
                  this.$emit("sendMsg",this.msg)
              }
          },
        }
        </script>
        // Parent.vue 响应
        <template>
            <child v-on:sendMsg="getChildMsg"></child>
            // 或 简写
            <child @sendMsg="getChildMsg"></child>
        </template>
        
        export default {
            methods:{
                getChildMsg(msg){
                    console.log(msg) // 这是父组件接收到的消息
                }
            }
        }

6、 $attrs /$ listeners

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

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

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

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

<!--父组件 parent.vue-->
        <template>
            <child :name="name" :message="message" @sayHello="sayHello"></child>
        </template>
        <script>
        export default {
            inheritAttrs: false,
            data() {
                return {
                    name: '通信',
                    message: 'Hi',
                }
            },
            methods: {
                sayHello(mes) {
                    console.log('mes', mes) // => "hello"
                },
            },
        }
        </script>
        <!--子组件 child.vue-->
        <template>
            <grandchild v-bind="$attrs" v-on="$listeners"></grandchild>
        </template>
        <script>
        export default {
            data() {
                return {}
            },
            props: {
                name,
            },
        }
        </script>
        <!--孙子组件 grand-child.vue-->
        <template>
        </template>
        <script>
        export default {
            created() {
                this.$emit('sayHello', 'hello')
            },
        }
        </script>