主要使用来沟通上下文,比如父——子——子1——子2,父组件和子2组件间的通信,不使用这方法也能解决的方式还有两种
- props $emit 一层一层的传 弊端:写着太麻烦
- vuex 用多了性能就不太行了
进入正题
官方文档上只提供了传递值的方式,没有提供子组件去跨级改父级组件的值,但是可以换一种写法就可以了,直接代码
代码结构: 父组件——child组件——son组件
父组件
<template>
<div class="text">盒子 {{state.name}}</div>
<div class="box">
<Child/>
</div>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, provide } from 'vue'
import Child from './components/child.vue'
export default defineComponent({
components:{
Child
},
setup() {
const state = reactive<any>({
name: 'zlz',
age: 24
})
const update = (key: string, val: any): void => {
state[key] = val
}
provide('ref2', {
val: state, // val需要传递的值
update // 更新传递的值的方法
})
return {
state
}
}
})
</script>
ps:当然也可以换一种写法 这一种写法要简便一点 但是语义化更弱
const state = reactive<any>({
name: 'zlz',
age: 24,
update // 更新state的方法
})
provide('ref2', state)
child组件
<template>
<div class="box">
<div class="box">child组件</div>
<Son/>
</div>
</template>
<script>
import { defineComponent, reactive, toRaw } from 'vue'
import Son from './son.vue'
export default defineComponent({
components:{
Son
},
setup() {
}
})
</script>
son组件
<template>
<div class="box">
son组件 {{ref2.val.age}}
</div>
<button @click="handleClick">
子组件点击
</button>
</template>
<script>
import { inject } from 'vue'
export default {
setup() {
const ref2 = inject('ref2')
const handleClick = () => {
const key = 'age'
ref2.update(key, 111) // 调用传递下来的方法去更新父组件的值
}
return {
ref2,
handleClick
}
}
}
</script>