美文网首页
vue组件隔代传值 provide / inject

vue组件隔代传值 provide / inject

作者: 变量只提升声明不提升赋值 | 来源:发表于2021-07-31 15:59 被阅读0次

一般在层级不多的组件中,我们都是用props去和子组件通信,但是如果层级比较多了,props用起来就显得不是那么灵活了。这个时候要么用订阅发布消息,要么用vuex来解决传值的问题。而vue官方也同时推出了一组api: provide / inject 用来隔代传值。
provide/inject需要一起使用,我们可以从父组件的provide传值,子组件或者孙组件,就可以用inject来接受子组件的provide属性值
具体使用方法如下

首先在父组件中注入provide

provide(){
        return{
            count:this.count
        }
    },// 和data,method等属性平级,
data(){
      return{
          count:1
      }
}

子孙组件接收

inject: ['count']
mounted(){
conslole.log(this.count)
}

这样就完成了基本使用。可以把provide想象成一个容器,他去把需要多层传递的data里的属性都收集起来,并且重新给个key。然后子组件里可以通过inject来接收这些属性,inject的值是一个数组,里面放上需要接收的属性的key就可以了。

当然,这样传递的数据并不是响应式的,文档中已经说明。如果想要响应式那provide传递的值就得是个响应式对象,比如这样

provide(){
        return{
            count:this.count
        }
    },// 和data,method等属性平级,
data(){
      return{
          count:{
                val:1
              }
      }
}

父组件这样注入,子组件就会接收到一个可响应的数据了。

传值解决了,那此时子组件该如何跟父组件通信呢。大家都知道,子组件是不可以修改父组件的数据了。vue为了保证数据的可维护性,是不提倡子组件去修改父组件的数据的。所以一般我们都是在父组件里写个方法,然后将此方法传递给子组件,子组件通过$emit来调用这个方法,以达到修改数据的目的。

那么在provide / inject应该怎么做呢?

其实也很简单,我们同样可以在provide中注入一个方法,提供给子组件修改数据。子组件只需要接收,调用就醒了。

相关文章

  • vue组件隔代传值 provide / inject

    一般在层级不多的组件中,我们都是用props去和子组件通信,但是如果层级比较多了,props用起来就显得不是那么灵...

  • vue组件传值和函数调用

    1,父组件传值给子组件 vue2.0 vue3.0(provide(提供)/inject(注入)用法) 2,父组件...

  • vue provide 和 react provider

    vue provide/inject 作用:祖先组件向其所有子孙后代传值 这对选项需要一起使用,以允许一个祖先组件...

  • vue3的父子组件传值

    在vue3的父子组件传值中提供了一种新的方式:provide/inject官网地址:https://www.jav...

  • Vue 3.0 Provide和Inject实现共享数据

    Provide和Inject可以在祖(父)组件和子(孙)组件间实现传值。相比prop只能父子之间传值而言,Prov...

  • provide/inject

    provide/inject能够用于实现祖先和后代之间的传值parent 父组件 child 组件 grand 孙...

  • vue刷新当前页面

    provide 与 inject结合使用 在父组件中定义 provide App.vue