vue 依赖注入 provide/inject 实战

官网描述是：

provide 选项允许我们指定我们想要提供给后代组件的数据/方法。在这个例子中，就是 <google-map> 内部的 getMap 方法：

provide: function () {
  return {
    getMap: this.getMap
  }
}

然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性：

inject: ['getMap']

不知道 是本人网络原因还是怎样，完整的示例 竟然打不开。还是自己动手亲测吧。

 

首先建立provideTest.vue，作为父组件，内部定义provide：

<template>

<div>

<p>{{msg}}</p>

<p>provideTest</p>

 

<InjectTest>

 

</InjectTest>

 

</div>

</template>

<script>

import InjectTest from '@/components/injectTest/injectTest.vue';

export default {

components: {

InjectTest

},

data () {

return {

msg: 'test0',

msga: 'testa'

}

},

provide: function () {

return {

getmsg: function(){

console.log('我是来自父组件的getmsg方法',this.msga);

console.log('我是来自父组件的getmsg方法',this.msg);

},

msg:this.msg

}

},

methods: {

},

created() {

}

}

</script>

 

 

然后 建立injectTest.vue，作为子组件：

 

<template>

<div>

<p>{{msg}}</p>

<p>provideTest</p>

 

<InjectTest>

 

</InjectTest>

 

</div>

</template>

<script>

import InjectTest from '@/components/injectTest/injectTest.vue';

export default {

components: {

InjectTest

},

data () {

return {

msg: 'test0',

msga: 'testa'

}

},

provide: function () {

return {

getmsg: function(){

console.log('我是来自父组件的getmsg方法',this.msga);

},

msg:this.msg

}

},

methods: {

},

created() {

}

}

</script>

 

父组件引入子组件的地址根据实际相对地址而定。

访问父组件 provideTest ，他的子组件 injectTest 也被加载执行，injectTest中 通过 inject: ['getmsg','msg'],  注入了 父组件中的 getmsg方法和msg对象。

在injectTest中 执行getmsg ，可以看出，父组件中定义了testa，当前组件中没有testa，所以console.log('我是来自父组件的getmsg方法',this.msga); 输出的 是undefined。

console.log('我是来自父组件的getmsg方法',this.msg); 输出的是 test1，是因为当前injectTest，data中定义了msg: 'test1',

总结

1、父组件通过provide定义可以注入到子组件中的对象和方法。

2、子组件通过inject注入父组件provide定义的对象和方法。

3、子组件调用inject注入的对象和方法时，上下文为当前组件。

4、如果inject中对象名和当前组件data中的对象重名，会被当前组件中定义的对象而覆盖。

5、inject中的方法名不可以和当前组件中的data、methods重名，不然会报错。