vue3 #组件通信#子传父#defineEmits

本文介绍了如何在Vue应用中使用ScriptSetup和Template进行子组件(Son.vue)向父组件(Parent.vue)的双向数据传递,通过`emit`函数和`props`实现父子组件间的通信。
摘要由CSDN通过智能技术生成

//在子组件中(son.vue)

<template>

    <h2>子组件</h2>

    <button @click = "handleClick"> 子组件触发 </button>

</template>

<script setup lang="ts">

cosnt emit = defineEmits( [ 'num' ] )

handleClick( () => {

    emit ('num' , 100)

} )

</scrpit>

//在父组件中

<template>

    <h1>父组件</h1>

    <Son  @num="handleNum" />

</template>

<script setup lang="ts">

import { ref } from 'vue'

import Son from './components/Son.vue'

const handleNum = ( val : number ) => {        

    console.log(val)      //val就是子组件传过来的数据

}

</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值