组件之间跨级通信

祖先组件

<script>
import Hello from './components/HelloWorld.vue'
export default{
  data(){
    return{
   msg:"年后好看",
    content:"啦啦啦啦",
   obj:{msg:"好好好"}
    }
  },
 components:{
   Hello:Hello
 },


 //provide:{message:"哈哈哈"}
 
 //访问组件实例的属性
 provide(){
   return{
     
     msg:this.msg,

    //provide/inject不是响应式的，
     obj:this.obj,//通过传递对象传递可以响应式
    content:()=>{return this.content}//函数返回响应式数据
   }
 }
}

</script>

<template>
<div>
<h2>祖先组件msg---{{msg}}</h2>
<button @click="this.msg='赢了'">改变Msg</button>

<h2>祖先组件obj.msg---{{obj.msg}}</h2>
<button @click="this.obj.msg='好了'">改变obj.Msg</button>

<h2>祖先组件content---{{content}}</h2>
<button @click="this.content='棒了'">改变content</button>

<Hello/>

</div>
</template>

父组件

<template>
  <div>
   <welcom/>
  </div>
</template>

<script>
import welcom from './TheWelcome.vue'

export default{
  components:{
   welcom:welcom
 }
}
</script>

孙子组件

<script>
export default{
  inject:['msg','obj','content'],
  computed:{//通过属性的方式
    getcontent(){
      return this.content()
    }
  }
}
</script>

<template>
 <div>
 我是孙子组件 
 <h2>孙子组件msg--{{msg}}</h2>
<h2>孙子组件obj.msg--{{obj.msg}}</h2>
<h2>孙子组件content--{{content()}}</h2>
<h2>孙子组件content--{{getcontent}}</h2>
 </div>
</template>