Vue3 子页向父页传输数据 context.emit
父页面 index.vue 主要看的是 @Tranfunx 及绑定的函数 ReceiveData<template><div id="index"><haaaa @Tranfunx='ReceiveData'></haaaa></div></template>R<script>// 导入子页面import chil
·
父页面 index.vue 主要看的是 @Tranfunx 及绑定的函数 ReceiveData
<template>
<div id="index">
<haaaa @Tranfunx='ReceiveData'></haaaa>
</div>
</template>R
<script>
// 导入子页面
import childs from '@/components/child.vue'
export default {
name: "index",
components:{
childs
},
setup(){
// 接收子页面传输的元素
const ReceiveData = (data) => {
console.log(data)
}
return {
ToData
}
}
}
</script>
子页面 child.vue 主要是 context.emit(funx,datas) 这里等同于 vue2 中 this.$emit
<template>
<div id="childs">
<div @click="SendData">向父页面发送数据</div>
</div>
</template>
<script>
export default {
name: "childs",
setup(pros,content){
// 接收子页面传输的元素
const SendData = () => {
// 这里的 Tranfunx 就是父元素中的绑定
context.emit('Tranfunx','发送的数据')
}
return {
SendData
}
}
}
</script>
更多推荐
已为社区贡献1条内容
所有评论(0)