Vue跨级通信（重点）

当不使用Vuex的前提下，子孙传递就得使用另外一种办法：

provide 和 inject

总结：

provide / inject 类似于消息的订阅和发布。

- inject接收数据。

- provide提供或发送数据，

（1）provide（name，value）：函数接收两个参数

name：定义提供 property的name。 value：property的值。

（2）inject（name，default）函数有两个参数

name：接收 provide 提供的属性名。

default：设置默认值，可以不写，是可选参数

示例：

A组件：

<template>
  <div>
    <h3>A组件</h3>
    <input type="text" v-model="word">
    <br>
    <hr>
    <brother></brother>
    <br>

  </div>
</template>

<script>
import brother from '../test/brother.vue'
export default {
    components:{
        brother,
    },
    data(){
        return{
            word:'123'
        }
    },
    provide:function(){
        return {
            Message:()=>this.word
        }
    }
}
</script>

<style>

</style>

注意

在这里须注意的是，当祖先传入给子孙的是一个对象，则provide返回的是一个对象；当祖先传入的不是一个对象时，则provide返回的是一个函数。

B组件：

<template>
  <div>
    C组件:
    {{ getFather }}
    {{ mes }}
  </div>
</template>

<script>
export default {
    data(){
        return {
            mes:''
        }
    },
    inject:['Message'],
    computed:{
        getFather(){
            return this.Message()
        }
    }
}
</script>

<style>

</style>

注意：

子孙组件通过inject进行接收，然后通过computed属性将接收到的值返回。这里不一定使用computed属性，其他属性也可以，因为inject里面的数据即为祖先组件传递的值。