Loading

vue 版本3的Emit进行组件传值【子组件传值给父组件】

 案例:

carver-child.vue【子组件】
<template>
 
<view>
 
   <button @click="onClick">按钮</button>
   
   <input type="text" @input="onInput"></input>
 
</view>
    
</template>


<script setup>
    
    // 自定义事件名
    const emit = defineEmits(['addClick','addChange'])

    function onClick(e){
        emit("addClick",123)
    }

    function onInput(e){
        emit("addChange",456)
    }

</script>

carver-parent.vue【父组件】

<template>
 
    <view>
         
        //使用子组件和事件
        <carver-child @addClick="addTestData" @addChange="changeTestData">
 
 
        </carver-child>
 
    </view>
    
</template>

<script setup>

    //接收触发子组件的事件

    const addTestData= function(e){
        console.log(e)
    }

    const changeTestData= function(e){
        console.log(e)
    }

</script>
posted @ 2025-08-31 18:11  Carvers  阅读(10)  评论(0)    收藏  举报