子组件触发父组件自定义事件(defineEmits)：子组件传值给父组件

@小朱呀路

已于 2022-07-25 17:12:40 修改

阅读量725

点赞数

分类专栏： vue3 文章标签： vue.js javascript 前端

于 2022-07-25 16:58:03 首次发布

本文链接：https://blog.csdn.net/weixin_45441173/article/details/125978657

版权

vue3 专栏收录该内容

31 篇文章 2 订阅

订阅专栏

父组件

<template>
    <div>
          <Menu  @onclick="getList"  @onclick2="getList2" />
    </div>
</template>

<script setup lang="ts">
import {reactive  ,ref}  from 'vue' 
const getList=(list:number[])=>{
console.log(list)
}
const getList2=(list:number[])=>{
    console.log(list)
}
 
</script>

<style scoped>

</style>

子组件

<template>
    <div class="menu"> 
           <div class="">
               <button @click="clickTap">派发1</button>
               <button @click="clickTap2">派发2</button>
           
           </div>
    </div>
</template>

<script setup lang="ts">
import  {reactive,  defineEmits}  from 'vue'; 
const list=reactive<number[]>([6,6,6,6])//number类型的数组值为[6,6,6,6]
const list2=reactive<string>('11') 
const emit=defineEmits(['onclick','onclick2']);
const clickTap=()=>{
    emit('onclick',list)
}

const  clickTap2=()=>{
    emit('onclick2',list2) 
}


</script>