在Vue3中使用Provide / Inject
16lz
2021-02-25
前面已经讲了浅谈Vue2中provide和inject使用,今天讲讲在Vue3中如何使用provide和inject
Vue3的写法已经和Vue2有所不同,因此需要熟悉Vue3的写法,其实变动不大,现在官方文档也有详细介绍,有兴趣的可以去了解.
1 使用 Provide
在 setup() 中使用 provide 时,我们首先从 vue 显式导入 provide 方法。这使我们能够调用 provide 时来定义每个 property。
provide 函数允许你通过两个参数定义 property:
property 的 name (<String> 类型)
- property 的 value
import { provide } from "vue";
export default {
setup() {
provide("data", "给子孙的数据");
}
};
上面这种方式传递String类型,还可以传递对象类型
import { provide } from "vue";
export default {
setup() {
provide("data", {
data1: "给子孙的数据1",
data2: "给子孙的数据2"
});
}
};
**2 使用 inject**在 setup() 中使用 inject 时,还需要从 vue 显式导入它。一旦我们这样做了,我们就可以调用它来定义如何将它暴露给我们的组件。inject 函数有两个参数:1. 要注入的 property 的名称1. 一个默认的值 (可选)
import { inject } from "vue";export default { setup() { const data = inject("data"); return { data }; }};
设置默认值
import { inject } from "vue";
export default {
setup() {
const data = inject("data", "我是默认值");
return {
data
};
}
};
**3 总结**基本用法和Vue区别不大,熟悉Vue2的可以直接上手。
©著作权归作者所有:来自51CTO博客作者mb5fd86dae5fbf6的原创作品,如需转载,请注明出处,否则将追究法律责任
更多相关文章
- 【Nest教程】自定义拦截器处理处理响应数据
- 【Nest教程】为项目增加个自定义过滤器
- Linux学习笔记总结(九十二)
- 自定义类型的认识
- 接口测试 之 接口测试定义
- Dialog屏幕调用选择屏幕
- FM实现F4帮助系列四:弹出框多筛选条件的搜索帮助(自定义筛选字段)
- OO ALV常用功能完整简例(热键单击,双击,帮助,编辑,自定义工具条等)
- “重定义;不同的基类型”,可能是顺序问题