vue组件通信provide/inject

组件通信

provide/inject

• 一对使用
• 父组件通过provide提供数据
• 子组件通过inject注入值
• 非响应式，可通过对象内属性的方式进行修改
• 解决深层次组件通信

举例：

在app组件下引入son1组件，son1组件引入son2，son2引入son3.这时候我们一般会通过props逐层传递，也可以直接通过provide/inject，直接从app把数据传给传给son3。

代码如下：

App.vue

<template>
  <div>
    <son1></son1>
    <hr>
    {{text}}
    <button @click="text='改变后的数据'">改变值</button>
  </div>
</template>

<script>
import son1 from '../components/son1'
export default {
  data() {
    return {
      text:'测试数据',
    }
  },
  provide(){
    return {
      text:this.text
    }
  },
  components:{
    son1
  }
}
</script>


<style lang="scss">

</style>

son1.vue

<template>
  <div>
    <son2></son2>
  </div>
</template>

<script>
import son2 from '../components/son2'
export default {
  name: "son1",
  components:{
    son2
  }
}
</script>

<style scoped>

</style>

son2.vue

<template>
  <div>
    <son3></son3>
  </div>
</template>

<script>
import son3 from '../components/son3'
export default {
  name: "son2",
  components:{
    son3
  }
}
</script>

<style scoped>

</style>

son3.vue

<template>
  <div>
    来自App的数据：{{text}}
  </div>
</template>

<script>
export default {
  name: "son3",
  inject:['text']
}
</script>

<style scoped>

</style>

效果图：

 但是这种方式传值有个问题，就是从App传递的数据是非响应式的。当我们改变App.vue里面的text这个变量的时候，传递给son3的数据并不会发生变化。

 遇到这中问题，可以通过把传递的值变成一个对象的形式进行传递。

App.vue

<template>
  <div>
    <son1></son1>
    <hr>
    {{text}}
    <button @click="text='改变后的数据'">改变值</button>
    <br>
    {{obj.text}}
    <button @click="obj.text='改变后的响应数据'">改变响应数据的值</button>
  </div>
</template>

<script>
import son1 from '../components/son1'
export default {
  data() {
    return {
      text:'测试数据',
      obj:{
        text:'响应的测试数据',
      }
    }
  },
  provide(){
    return {
      text:this.text,
      obj:this.obj
    }
  },
  components:{
    son1
  }
}
</script>


<style lang="scss">

</style>

son3.vue

<template>
  <div>
    <div>
      来自App的数据：{{ text }}
    </div>
    <div>
      来自App的响应数据：{{ obj.text }}
    </div>
  </div>
</template>

<script>
export default {
  name: "son3",
  inject: ['text', 'obj']
}
</script>

<style scoped>

</style>

效果图：

如果在son2中使用了 provide，变量名一直，则会覆盖。

<template>
  <div>
    <son3></son3>
  </div>
</template>

<script>
import son3 from '../components/son3'

export default {
  name: "son2",
  provide() {
    return {
      text:'son2中的测试数据'
    }
  },
  components: {
    son3
  }
}
</script>

<style scoped>

</style>

如图：

总结：

• provide/inject成对使用，是为了解决深层次组件通信的，如果需要响应式，可以通过对象内属性的方式。
• 子组件同名的情况，更近的覆盖。
• 可作为多个较大的父组件，来向下传播唯一值。

父组件：
provide(){
    return {
      text:this.text,
      obj:this.obj
    }
},



子组件：
inject: ['text', 'obj']