前言
provide和inject在Vue 2中已经被广泛应用,不是新鲜API,3.0重新认识一下它们两个。
一句话介绍:provide可以向所有子孙组件提供数据以及提供修改数据的方法,子孙组件用inject使用数据。
在组合式API中的用法
基本用法
似乎,组合式API的provide
没有提供批量方法, 只能每个变量写一句。
顶级组件:
<template>
<div>
<son />
</div>
</template>
<script setup>
import son from "./son.vue";
import { provide } from "vue";
provide("abc", "123");
</script>
子组件:
<template>
<div>
<grandson />
</div>
</template>
<script setup>
import grandson from "./grandson.vue";
</script>
孙组件:
<template>
<div>我是孙子</div>
</template>
<script setup>
import { inject } from "vue";
const abc = inject("abc");
console.log(abc);
</script>
针对本文的评论,说明一下
官方说:
inject() can only be used inside setup() or functional components.
这个意思是说,inject()只能放在setup()生命周期里运行,不能放在别的周期里运行,也不能放在事件周期里运行。所以你可以先在setup()周期取值。
例一:这是允许的,因为console.log是setup()生命周期里的同步代码
function xx() {
console.log(inject("abc"))
}
xx()
例二:这是禁止的,因为setTimeout是异步函数,执行console.log(inject("abc"))的时候已经不在setup()生命周期里。
function xx() {
setTimeout(() => {
console.log(inject("abc"))
})
}
xx()
例三:让例一的xx函数作为鼠标事件回调,也是禁止的,原因也一样。
例四:放在Promise.then()也是禁止的,比如:
Promise.resolve().then(() => {
console.log(inject("abc"))
})
一级组件修改数据,孙子组件监听变更
provide的变量必须是响应式变量,孙子组件监听的变量也必须是响应式变量。
一级组件:
<template>
<div>
<son />
<button @click="abc = '456'">{{ abc }}</button>
</div>
</template>
<script setup>
import son from "./son.vue";
import { provide } from "vue";
ref: abc = "123";
provide("abc", $abc);
</script>
孙子组件:
<template>
<div>我是孙子 - {{abc}}</div>
</template>
<script setup>
import { inject, watch } from "vue";
ref: abc = inject("abc");
watch($abc, () => {
console.log(abc + '变了');
});
</script>
孙子组件修改数据,一级组件监听变更
一级组件除了提供数据,还要提供一个修改数据的方法,孙子组件要接收并使用这个方法,这样修改的就是一级组件的数据,修改之后又会影响孙子组件的数据。
一级组件:
<template>
<div>
<son />
<button @click="abc = '456'">{{ abc }}</button>
</div>
</template>
<script setup>
import son from "./son.vue";
import { provide } from "vue";
ref: abc = "123";
function updateAbc(val) {
abc = val;
}
provide("abc", $abc);
provide("updateAbc", updateAbc);
</script>
孙子组件:
<template>
<div @click="updateAbc('789')">我是孙子 - {{abc}}</div>
</template>
<script setup>
import { inject, watch } from "vue";
ref: abc = inject("abc");
const updateAbc = inject('updateAbc');
watch($abc, () => {
console.log(abc + '变了');
});
</script>
禁止孙子组件修改一级组件的数据
禁止的话,一级组件传递的变量必须是只读的,可以是readonly,也可以是shallowRef。这样孙子组件修改数据的话,一级组件不会有反应。
一级组件:
<template>
<div>
<son />
<button @click="abc = '456'">{{ abc }}</button>
</div>
</template>
<script setup>
import son from "./son.vue";
import { shallowRef, provide } from "vue";
let abc = shallowRef("123");
function updateAbc(val) {
abc = val;
}
provide("abc", abc);
provide("updateAbc", updateAbc);
</script>
在配置项式API中的用法
跟Vue 2差不多,简单说一下。
provide
provide
语法比在组合式API里要灵活,毕竟可以用对象。比如:
provide: {
user: 'John Doe',
},
如果要把data里的数据provide,说白了就是打算用this
,provide要写成函数:
provide() {
return {
user: this.user,
updateUser: this.updateUser
}
},
如果要提供计算属性,也是一样的道理,不过,如果不打算用配置项式计算属性,而是想用vue的computed方法,可以写成:
provide() {
return {
userLength: computed(() => this.user.length),
updateUser: this.updateUser
}
},
inject
inject
的用法更简单,比如inject: ['user', 'updateUser']
。
双向修改而且响应
想要双向修改而且响应,就必须借助reactive或者ref家族方法和computed方法。provide的数据必须是computed返回的数据,才能保证数据有变化时刷新孙子组件的数据。孙子组件要用computed + unref来解包装且计算属性,才能得到真正需要的数据。
可以看到,由于孙子组件的inject和computed的属性不能重名,所以我造出一个abcabc
变量名,这就比较麻烦了。我们再看组合式API,就没有abcabc
这种中间变量,原因是ref: abc = inject("abc");
让接收和加响应式一气呵成,这也是组合式API的优势之一。
一级组件:
<template>
<div>
<son />
<button @click="abc = '456'">{{ abc }}</button>
</div>
</template>
<script>
import son from "./son.vue";
import { ref, shallowRef, computed, provide } from "vue";
export default {
components: {
son,
},
data() {
return {
abc: 123,
}
},
provide() {
return {
abcabc: computed(() => this.abc),
updateAbc: this.updateAbc
}
},
methods: {
updateAbc(val) {
this.abc = val;
}
}
}
</script>
孙子组件:
<template>
<div @click="updateAbc('789')">我是孙子 - {{ abc }}</div>
</template>
<script>
import { unref } from "vue";
export default {
inject: ["abcabc", "updateAbc"],
computed: {
abc() {
return unref(this.abcabc);
},
},
};
</script>
网友评论