VUE3中的父子组件通讯
原创
1 使用defineProps:这里注意的是子组件直接使用的话，可以不需要props.info，直接用info就可以使用。但是如果在setup中的话还是要props.info这种写法才行。另外子组件props属性只能读不能修改
父组件定义：
let money=ref(10000)
<child info="我是父组件" :money="money"></child>
子组件使用:
<script setup lang="ts">
let props=defineProps(['info','money'])
</script>
<el-input type="text" :model-value="props.money" style="width: 200px"></el-input>
<el-input type="text" :model-value="props.info" style="width: 200px"></el-input>
<el-input type="text" :model-value="money" style="width: 200px"></el-input>
<el-input type="text" :model-value="info" style="width: 200px"></el-input>效果如下：
2 父子组件方法调用: 子组件的回调父组件的方法
父组件中方法定义:
<child info="我是父组件" :money="money" @childHandle="parentHandle"></child>
const parentHandle = (param1, param2) => {
console.log(param1, param2)
}
子组件中方法定义和使用:
<button @click="handleClick" style="margin-top: 50px">点击</button>
<button @click="events('childHandle','Jack','Lucy')" >点击2</button>
let events = defineEmits(['childHandle'])
const handleClick = () => {
events('childHandle', 'AK47', 'M4A1')
}效果如下:
3 父组件调用子组件的方法：
3.1 在父组件中用ref标记子组件如<child ref="childComponent" @click="parentHandle2"></child>
3.2 子组件用defineExpose把方法暴露出去
3.3 父组件中直接调用子组件方法: childComponent.value.play()
父组件实现如下：
<child ref="childComponent" @click="parentHandle2"></child>
const childComponent=ref()
const parentHandle2 = () => {
childComponent.value.play()
}
子组件实现如下：
const play = () => {
alert('你调用了子组件的方法')
}
defineExpose({
play
})实际效果:
4 通过provide和inject通讯，父组用provide提供参数，子组件或者孙组件用inject获取
父组件：
let params = ref('abc')
provide('Token',params)
子或者孙组件：
let son=inject('Token')
console.log(son.value)原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录