当前位置:网站首页>Component pass value provide/inject
Component pass value provide/inject
2022-07-31 03:32:00 【The life of an elephant and an ant】
1.简介
1.Vue2.2.0 新增 API,这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效.
2.一言而蔽之:祖先组件中通过 provider 来提供变量,然后在子孙组件中通过 inject 来注入变量.
provide / inject API 主要解决了跨级组件间的通信问题,不过它的使用场景,主要是子组件获取上级组件的状态,跨级组件间建立了一种主动提供与依赖注入的关系.
2.举个例子
假设有两个组件: A.vue 和 B.vue,B 是 A 的子组件
// A.vue
export default {
provide: {
name: '浪里行舟'
}
}
// B.vue
export default {
inject: ['name'],
mounted () {
console.log(this.name); // 浪里行舟
}
}
3.provide 与 inject 怎么实现数据响应式
一般来说,有两种办法:
- provide 祖先组件的实例,然后在子孙组件中注入依赖,这样就可以在子孙组件中直接修改祖先组件的实例的属性,不过这种方法有个缺点就是这个实例上挂载很多没有必要的东西比如 props,methods 等
- 使用 2.6 最新 API Vue.observable 优化响应式 provide (推荐)
// A 组件
<div>
<h1>A 组件</h1>
<button @click="() => changeColor()">改变color</button>
<ChildrenB />
<ChildrenC />
</div>
......
data() {
return {
color: "blue"
};
},
// provide() {
// return {
// theme: {
// color: this.color //这种方式绑定的数据并不是可响应的
// } // 即A组件的color变化后,组件D、E、F不会跟着变
// };
// },
provide() {
return {
theme: this//方法一:提供祖先组件的实例
};
},
methods: {
changeColor(color) {
if (color) {
this.color = color;
} else {
this.color = this.color === "blue" ? "red" : "blue";
}
}
}
// 方法二:使用2.6最新API Vue.observable 优化响应式 provide
// provide() {
// this.theme = Vue.observable({
// color: "blue"
// });
// return {
// theme: this.theme
// };
// },
// methods: {
// changeColor(color) {
// if (color) {
// this.theme.color = color;
// } else {
// this.theme.color = this.theme.color === "blue" ? "red" : "blue";
// }
// }
// }
// F 组件
<template functional>
<div class="border2">
<h3 :style="{ color: this.theme.color }">F 组件</h3>
</div>
</template>
<script>
export default {
inject: ["theme"]
// inject: {
// theme: {
// from: theme,
// //函数式组件取值不一样
// default: () => ({})
// }
// }
};
</script>
虽说 provide 和 inject 主要为高阶插件/组件库提供用例,但如果你能在业务中熟练运用,可以达到事半功倍的效果!
有关 inject The use of the parameters for the object visible provide / inject
4.项目中使用
provide() {
return {
reload: this.reload
};
},
provide() {
return {
_getMapRoot: () => {
return this;
},
// Provide map instance to child components
_getMapRootMap: this.getMap,
};
},
边栏推荐
- Know the showTimePicker method of the basic components of Flutter
- Day32 LeetCode
- Daily practice of LeetCode - 138. Copy a linked list with random pointers
- 顺序表的实现
- LeetCode simple problem to find the subsequence of length K with the largest sum
- $parent/$children 与 ref
- Just debuted "Fight to Fame", safety and comfort are not lost
- SonarQube的BUG定义
- 浅识Flutter 基本组件之CheckBox组件
- (线段树) 基础线段树常见问题总结
猜你喜欢
【动态规划】连续子数组的最大和
从滴滴罚款后数据治理思考
The application and practice of mid-to-platform brand advertising platform
[C language] Preprocessing operation
BP神经网络
Detailed explanation of TCP (2)
No qualifying bean of type 问题
What skills do I need to learn to move from manual testing to automated testing?
Database implements distributed locks
一份高质量的测试用例如何养成?
随机推荐
【编译原理】递归下降语法分析设计原理与实现
BUG definition of SonarQube
beforeDestroy与destroyed的使用
(线段树) 基础线段树常见问题总结
选好冒烟测试用例,为进入QA的制品包把好第一道关
What is a system?
IDEA 注释报红解决
从滴滴罚款后数据治理思考
LeetCode每日一练 —— OR36 链表的回文结构
els 方块向左移动条件判断
A brief introduction to the showDatePicker method of the basic components of Flutter
Daily practice of LeetCode - 138. Copy a linked list with random pointers
A brief introduction to the CheckBox component of the basic components of Flutter
什么是系统?
Web container and IIS --- Middleware penetration method 1
Distributed locks and three implementation methods
Select the smoke test case, and make the first pass for the product package entering QA
Ambiguous method call.both
点云DBSCAN聚类(MATLAB,非内置函数)
Redis实现分布式锁