vue.js基础学习（组件之间的跨级通信Provide、Inject ）

基础入门：vue.js 组件之间的跨级通信Provide、Inject

1、Provide

• provide/inject默认并不是响应式的,provide 和 inject 通常成对一起使用，使一个祖先组件作为其后代组件的依赖注入方，无论这个组件的层级有多深都可以注入成功，只要他们处于同一条组件链上。

• 这个 provide 选项应当是一个对象或是返回一个对象的函数。这个对象包含了可注入其后代组件的属性。你可以在这个对象中使用 Symbol 类型的值作为 key。

2、Inject

• 用于声明要通过从上层提供方匹配并注入进当前组件的属性。

• 该 inject 选项应该是以下两种之一：

• 一个字符串数组
• 一个对象，其 key 名就是在当前组件中的本地绑定名称，而它的值应该是以下两种之一：
  • 匹配可用注入的 key (string 或者 Symbol)
  • 一个对象
    • 它的 from 属性是一个 key (string 或者 Symbol)，用于匹配可用的注入
    • 它的 default 属性用作候补值。和 props 的默认值类似，如果它是一个对象，那么应该使用一个工厂函数来创建，以避免多个组件共享同一个对象。
• 如果没有供给相匹配的属性、也没有提供默认值，那么注入的属性将为 undefined。 

部分内容转载自：依赖注入 | Vue.js  

源代码：

App.vue:

<script>
  import Content from './components/Content.vue'
  export default{
    data(){
      return{
        message:'这里是中国，'
      }
    },
    methods:{
      changeMag:function(){
        this.message='我所站立的地方！'
      }
    },
    components:{
    Content,
}
  }
</script>

<template>
  <div>
    <Content></Content>
  </div>
</template>

<style>

</style>

Content.vue :

<script>
    import hello from './hello.vue'
    export default{
    data(){
      return{
        message:'word',
        obj:{
            message:'hello word'
        }
            }
        },
        // provide:{
        // message:'word'
        //  },
        //访问组件实例
        //provide/inject默认并不是响应式的
        provide(){
            return{
                // message:this.message
                // obj:this.obj//响应式对象
                message:()=>this.message//函数返回响应式数据
            }
        },
    components:{
        hello
    }
    }
</script>

<template>
    <h2>Content组件：{{message}}</h2>
    <button @click="message='你好'">改变值</button>
    <hello></hello>
</template>

<style>

</style>

hello.vue:

<script>
    export default{
    data(){
      return{
       
            }
    },
    computed:{
        newMsg:function(){
            return this.message()
        }
    },
    inject:['message']
    // inject:['obj']//通过响应式对象
    
    }
</script>

<template>
    <h2>我是hello组件</h2>
    <!-- <h2>hello组件:{{obj.message}}</h2> -->
    <h2>hello--{{newMsg}}</h2>
    
</template>

<style>

</style>

 源代码运行情况：