一样平常来说,有两种步伐:
- provide祖先组件的实例,然后在子孙组件中注入依靠,这样就可以在子孙组件中直接修改祖先组件的实例的属性,不外这种要领有个弱点就是这个实例上挂载许多没有须要的对象好比props,methods
- 行使2.6最新API Vue.observable 优化相应式 provide(保举)
我们来看个例子:孙组件D、E和F获取A组件转达过来的color值,并能实现数据相应式变革,即A组件的color变革后,组件D、E、F不会随着变(焦点代码如下:)

- // 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: injections.theme.color }">F 组件</h3>
- </div>
- </template>
- <script>
- export default {
- inject: {
- theme: {
- //函数式组件取值纷歧样
- default: () => ({})
- }
- }
- };
- </script>
虽说provide 和 inject 首要为高阶插件/组件库提供用例,但假如你能在营业中纯熟运用,可以到达事半功倍的结果! (编辑:湖南网)
【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!
|