vue父组件传递提供给子组件的注入值的方法

正常情况下，我们是用道具在父子之间传递价值观，所以这个我就不多说了，但是如果我们希望父亲把价值观传递给子组件的组件呢？这里我们可以使用提供和注入(依赖注入)

提供/注入需要一起使用。我们可以传递父组件、子组件或子组件的提供值，然后我们可以使用inject接受子组件的提供属性值

详见官网介绍提供/注入：https://cn . vuejs . org/v2/API/#提供-注入

下面我们可以写一个简单的例子来演示

父组件父组件，其中我们引入了子组件provideChild

template div button @ click=' add ' click to add/button provide child//div/templatestimport provide child from ' @/components/provide child ' export default { components 3360 { provide child }，data () {return {foo:5}}，//依靠注入传递值provide(){ return { new foo : this . foo } }，methods: {add () {this.foo}。

子组件provideChild，我们也在子组件中引入了他的一个组件

我们可以看到，他打印出来的注入newFoo值是5

Templatesection div我是一个子组件：{ { new foo } }/div childchild//section/templatestimport child child from ' @/components/child child的导出默认值{ components: { childchild }，inject: ['newfoo']，mounted(){ console . log(this . new foo)}，}/script孙子组件child child

Template div我是一个子组件的组件：{ { new foo } }/div/templatescriptexportdefault { inject :[' new foo ']。}/脚本

接下来，我们可以看看页面

它可以显示，但是当我们单击添加时，子组件没有响应。如果你现在好好看看文档，你应该猜到为什么了

提供的必须是一个对象的绑定值注入来响应，所以我们可以试一试

//写入父级父组件模板div button @click='add' click添加/按钮provide child//div/templatestimport provide child来自' @/components/provide child ' export default { components 3360 { provide child }，data(){ return { fooobj : { foo :5 } }，//传递value provide(){ return { new foo : this . foobj } }，methods : { add(){ this . foobj . foo }，}/script//subcomponent

这样，我们就可以操作父组件的添加方法，并获得子组件的响应

这些都是本介绍的相关知识点。感谢您的学习和支持。