顶层组件向任意的底层组件
传递数据和方法
,实现
跨层组件通信
一.跨层传递普通数据
1. 顶层组件通过
provide函数提供
数据
2. 底层组件通过
inject函数获取
数据
二.跨层传递响应式数据
在调用provide函数时,第二个参数设置为
ref对象
三.跨层传递方法
顶层组件可以向底层组件传递方法,
底层组件调用方法修改顶层组件中的数据
顶层组件代码
<script setup>
import {inject} from 'vue'
// 1.跨层传递普通数据
const themeColor = inject('theme-color')
// 2.跨层响应式数据
const count = inject('count')
// 3.跨层级传递函数=>给子孙后代传递可以修改数据的方法
const changeCount = inject('changeCount')
const clickFn =()=>{
// count=1000不可以直接修改
changeCount(1000)
}
</script>
<template>
<div>
<h3>我是底层组件 ---{{ themeColor }}-----{{count}}</h3>
<button @click="clickFn">更新count</button>
</div>
</template>
中层组件代码
<script setup>
import BottomCom from './bottom-com.vue'
</script>
<template>
<div>
<h2>我是中间组件</h2>
<BottomCom></BottomCom>
</div>
</template>
底层组件代码
<script setup>
import {inject} from 'vue'
// 1.跨层传递普通数据
const themeColor = inject('theme-color')
// 2.跨层响应式数据
const count = inject('count')
// 3.跨层级传递函数=>给子孙后代传递可以修改数据的方法
const changeCount = inject('changeCount')
const clickFn =()=>{
// count=1000不可以直接修改
changeCount(1000)
}
</script>
<template>
<div>
<h3>我是底层组件 ---{{ themeColor }}-----{{count}}</h3>
<button @click="clickFn">更新count</button>
</div>
</template>