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

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

父组件

<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>

 
相关文章
|
8月前
有关子组件修改父组件传值报错问题
有关子组件修改父组件传值报错问题
55 0
|
JavaScript
Vue子组件监听父组件的事件
Vue子组件监听父组件的事件
346 0
Vue子组件监听父组件的事件
|
4月前
|
JavaScript
Vue在子组件中判断父组件是否传来事件
本文介绍了在Vue中如何通过`vm.$listeners`对象来判断父组件是否传递了特定的事件给子组件,并展示了如何检查事件是否存在以及相应的处理方法。
262 0
Vue在子组件中判断父组件是否传来事件
|
8月前
|
JavaScript
在父组件中使用子组件时,如何保证子组件的实例在父组件的生命周期中得到正确的更新?
在父组件中使用子组件时,如何保证子组件的实例在父组件的生命周期中得到正确的更新?
38 2
|
8月前
|
JavaScript
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
|
7月前
|
JavaScript
子组件向父组件传参的方式?
子组件向父组件传参的方式?
111 0
|
8月前
|
前端开发 JavaScript 开发者
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(二)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
91 0
|
8月前
|
JavaScript 前端开发 算法
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(一)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
115 0
|
8月前
父组件可以监听到子组件的生命周期吗
父组件可以监听到子组件的生命周期吗
42 0
|
8月前
|
小程序
子组件调用父组件的方法并传递数据
子组件调用父组件的方法并传递数据