Vue3中实现父子组件通信
父传子
父组件给子组件绑定属性，子组件内部提供props选项接收
setup语法糖下局部组件无需注册可以直接使用
//父组件中
<script setup>
import SonCom from ''
const message=ref('this is father')
</script>
<template>
<SonCom :messgae="message"/>
</template>
//子组件中
<script setup>
//defineProps 接收父组件传来的属性
const props=defineProps({
message:String
})
console.log(props.message)
</script>
子传父
父组件中给子组件标签通过@绑定事件，子组件内部通过$emit触发事件
//父组件中
<script setup>
import SonCom from ''
const getMessage=(msg)=>{
console.log(msg)
}
</script>
<template>
<!--绑定事件-->
<SonCom @get-message="getMessage" />
</template>
//子组件中
<script setup>
//definEmits 定义事件，要求传来数组格式的参数
const emit=defineEmits(['get-message'])
//触发自定义事件，传数据给父组件
const sendMessage=()=>{
emit('get-message','子组件触发自定义事件')
}
</script>
模板引用和对象暴露
- 调用ref函数生成ref对象 ，绑定ref对象到标签
组件挂载完毕之后才能获取
<script setup>
//调用ref函数，生成ref对象
const h1Ref=ref(null)
//组件挂载完毕之后获取
onMounted(()=>{
console.log(h1Ref.value)
})
</script>
<template>
<!-- ref绑定到标签 -->
<h1 ref="h1Ref"> dom标签h1 </h1>
</template>
- 默认情况下setup中组件内部的属性和方法不开放给父组件访问，可以通过defineExpose()方法暴露给父组件
<script setup>
//子组件中
defineExpose({
name,
setName
})
</script>
provide 和inject
顶层组件向任意的底层组件传递数据和方法，实现跨层组件通信
- 顶层组件通过provide函数提供数据
//key是自定义的名字
provide('key',顶层组件中的数据或ref对象)
- 底层组件通过inject函数获取数据
const message=inject('key')
- 底层组件可以调用方法修改顶级组件中的数据
//顶层组件传递方法
provide('method-key',setCount)
//底层组件接收方法
const setCount=inject('method-key')