Vue2的依赖注入(跨级通信)基本使用

provide(提供) ，inject(注入)  祖先级组件用provide传递数据,它的所有后代都可以通过inject取到数据

使用演示：

//祖先组件
<template><div>父组件传的值：{{num}}
</div>
</template><script>
//导入子组件
import Son from '@/component/Son'
export default{data(){return{num:10}},//祖先级组件把要传递的数据放入provide里
provide(){  return{num:this.num},
}
}
</script>

 

//儿子组件
<template><div>子组件接收传来的值:{{num}}</div>
</template><script>
//导入孙子级别组件
import Grandson from '@/component/Grandson'export default{//后代组件可以通过inject拿到数据inject:['num']
}
</script>

//孙子组件
<template><div>孙子组件接收传来的值:{{num}}</div>
</template><script>export default{//后代组件可以通过inject拿到数据inject:['num']}
</script>

但是依赖注入的数据默认不是响应式的，祖先级别组件修改数据，其他使用到这个数据的组件不会同步

我点击按钮使祖先组件的num值+1，只有祖先组件的num值变了

使依赖注入的数据成为响应式的：

 第一种方法(把要传的数据放在对象里)：

<template><div>父组件传的值：{{ obj.num }} <br /><Son></Son><button @click="addNum">+1</button></div>
</template>//再祖先组件里把要穿的数据放在一个对象里
export default{data(){return{obj:{num:10   }      }},provide(){return{//把这个对象传过去obj:this.obj}},methods: {addNum () {this.obj.num++}
}

<template><div>{{obj.num}}</div>
<//template>//孙子组件
export default{inject:['obj']
}

此时再祖先组件里修改num数据，所有使用到这个数据的组件都会同步

 第二种方法，传递一个参数用方法返回

//祖先组件
export default{data(){return{age:6}},provide(){return{age(): => this.age}}
}

<template><div>{{age()}}</div>
</template>//孙子组件
export default{inject:['age']
}