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

本文主要是介绍vue3 #组件通信#子传父#defineEmits，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

//在子组件中（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>

这篇关于vue3 #组件通信#子传父#defineEmits的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---