vue 中provide的用法_vue的provide与inject使用技巧

provide与inject是配对使用的.

项目开发中,为了实现需求的功能,有时候会嵌套很多层组件.

比如:base.vue,parent.vue,child.vue,game.vue,有五个组件.

它们是一层一层嵌套的.

假如base组件的某个对象要传递到game组件内.那就需要用props,一层一层往下通信.

我们需要这样做:

这种组件通信的方式对于层级少的话,还是比较方便的.如果多层级下就比较繁琐了.

现在,还有一种情况,game组件如果想获取或者修改base组件的某些对象的值.

那么,我们需要这样做:

this.$parent.$parent.$parent.baseObject

假如有一天往上的某一层组件去掉了,那么加载game组件就报错,找不到这个$parent了.

所以官方提供了provide与inject来解决多层级组件通信的不足.

代码实例:

base.vue

import parent from './parent';

export default {

components : {

parent

},

name: 'base',

provide(){

return {

target : this.baseSelf

}

},

data () {

return {

msg : "base Component",

baseSelf : this

}

},

created(){

}

}

game.vue

From : {{this.from.msg}}

export default {

name: 'game',

inject : ['target'],

data () {

return {

from : this.target

}

},

created(){

}

}