Vue 开发实战基础篇 # 12:常用高级特性provide/inject
Posted 凯小默
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 开发实战基础篇 # 12:常用高级特性provide/inject相关的知识,希望对你有一定的参考价值。
说明
【Vue 开发实战】学习笔记。
组件通信
provide/inject
底层通用组件用的很多。进行跨组件通信。
要实现组件 E 变化,更新 F、I
组件A
<template>
<div class="border">
<h1>A 结点(第一级)</h1>
<button @click="() => changeColor()">改变color</button>
<ChildrenB />
<ChildrenC />
<ChildrenD />
</div>
</template>
<script>
import ChildrenB from "./ChildrenB";
import ChildrenC from "./ChildrenC";
import ChildrenD from "./ChildrenD";
export default
components:
ChildrenB,
ChildrenC,
ChildrenD
,
// provide()
// return
// theme:
// color: this.color
//
// ;
// ,
// 需要响应式数据
provide()
return
theme: this
;
,
data()
return
color: "blue"
;
,
methods:
changeColor(color)
if (color)
this.color = color;
else
this.color = this.color === "blue" ? "red" : "blue";
;
</script>
组件E
<template>
<div class="border2">
<h3 :style=" color: theme.color ">E 结点(第三级)</h3>
<button @click="handleClick">改变color为green</button>
</div>
</template>
<script>
export default
components: ,
inject:
theme:
default: () => ()
,
methods:
handleClick()
if (this.theme.changeColor)
this.theme.changeColor("green");
;
</script>
组件F:可以通过 from 命别名
<template>
<div class="border2">
<h3 :style=" color: theme1.color ">F 结点(第三级)</h3>
</div>
</template>
<script>
export default
components: ,
inject:
// 可以通过 from 命别名
theme1:
from: "theme",
default: () => ()
;
</script>
组件I:函数式组件需要使用 injections
<template functional>
<div class="border2">
<!-- 函数式组件使用injections -->
<h3 :style=" color: injections.theme.color ">I 结点(第三级)</h3>
</div>
</template>
<script>
export default
inject:
theme:
default: () => ()
;
</script>
点击两个按钮改变颜色,三个子节EFI点都会颜色变化
如果在组件C 里添加 provide
<template>
<div class="border1">
<h2>C 结点(第二级)</h2>
<ChildrenE />
<ChildrenF />
</div>
</template>
<script>
import ChildrenE from "./ChildrenE";
import ChildrenF from "./ChildrenF";
export default
components:
ChildrenE,
ChildrenF
,
provide()
return
theme:
color: "green"
;
;
</script>
EF节点不会变化,只有A节点的按钮点击了I节点才会变化颜色,这个跟冒泡很类似。就像在C节点阻止了冒泡事件一样
完整源码可以参考这个https://github.com/kaimo313/vue-development-practice/tree/master/vue-demo/src/views/demo12
以上是关于Vue 开发实战基础篇 # 12:常用高级特性provide/inject的主要内容,如果未能解决你的问题,请参考以下文章