vue中父向下跨级传递数据

provide/inject 逐级透传问题 并不是响应式的

实现响应式：1传递对象， 2 函数返回响应式数据

组件模式

app-->Home-->Content-->Hello

Home.vue

<template>
    <h2>我是Home组件</h2>
    <p>message--{{ message }}</p>
    <button @click="message='你好'">修改message</button>

   <p>obj.message--{{ obj.message }}</p>
    <button @click="obj.message='你好'">修改obj.message</button>
    <Content></Content>
</template>
<script>
import Content from './Content.vue'
// provide/inject 逐级透传问题 并不是响应式的
// 实现响应式：1传递对象， 2 函数返回响应式数据
export default{
    data(){
        return {
            message:'我来自Home',
            obj:{
                message:'msg--我来自Home'
            },
        }
    },
    components:{
        Content
    },
    
    // 第一种
    // provide:{
    //      message:'我来自Home'
    // }

    //第二种： 想访问组件实例的属性，需要使函数形式使用 
    provide:function(){
        return {
            message:this.message,
            obj:this.obj,
            messageSecond:()=>this.message//函数返回响应式数据
        }
    }
}
</script>

Hello.vue

<template>
    <h2>我是Hello组件</h2>
    <div>Hello--mesage--{{ message }}</div>
    <div>Hello--obj.message--{{ obj.message }}</div>
    <div>Hello--messageSecond--{{ getNewMsg }}</div>
</template>
<script>
export default{
    data(){
        return {
            msg:'hello world'
        }
    },
    computed:{
        getNewMsg:function(){
            return this.messageSecond()
        }
    },
    inject:['message','obj','messageSecond']
}
</script>