vue2/vue3 Provide和Inject使用方式

目录

vue2

vue3

---

vue2

第一种：基本用法（不是响应式）

// 父组件
data() {
  return {
     text: "张三"
  }
},
provide: function() {
  return {
     name: this.text
   }
 },

这种方法传递过来的数据是没有响应性的，当你改变父组件中的name时，子组件中接收的name并不会改变。
官方解释：provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的 property 还是可响应的。

第二种：响应式

1、传递的参数用一个函数返回

// 父组件
data() {
    return {
      text: "张三"
    }
},
provide: function() {
    return {
      texts: () => this.text
    }
}

// 子组件

// html
<p>{{ textValue }}</p>

// js
inject: ['texts'],
computed: {
   textValue() {
     return this.texts()
   }
}

父组件返回一个自定义的函数,子组件进行computed来进行处理，来实现响应式数据处理。

2、把需要传递的参数定义成一个对象

// 父组件
data() {
    return {
      user:{
        name: "张三"
       }
    }
},
provide: function() {
    return {
      user: this.user
    }
}

// 子组件

// html
<p>{{ userName }}</p>
<p>{{ user.text }}</p>

// js
inject: ['user'],
computed: {
   userName() {
     return this.user.text
   }
}

vue3

直接使用ref 和 reactive方法，来进行响应式数据处理

// 父组件
import { reactive,provide,ref } from 'vue';
provide('page', ref('1'))
provide('user', reactive({
  age: 11,
  name: '张三'
}))

// 子组件
import { inject } from 'vue';
const user = inject("user");
const page = inject("page");

无论任何一个组件内的值发生改变，两个组件的值都会进行响应式的数据更新。

扩展：

vue2/vue3 EventBus事件总线(用于组件通信)

vue3 常用的组件互相通信(父子、兄弟、爷孙、任意组件)