子组件触发父组件自定义事件(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>

 
相关文章
|
6月前
有关子组件修改父组件传值报错问题
有关子组件修改父组件传值报错问题
44 0
|
6月前
|
JavaScript
在父组件中使用子组件时,如何保证子组件的实例在父组件的生命周期中得到正确的更新?
在父组件中使用子组件时,如何保证子组件的实例在父组件的生命周期中得到正确的更新?
35 2
|
6月前
|
JavaScript
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
|
5月前
|
JavaScript
子组件向父组件传参的方式?
子组件向父组件传参的方式?
93 0
|
6月前
|
JavaScript 前端开发 算法
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(一)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
83 0
|
6月前
|
前端开发 JavaScript 开发者
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件(二)
vue3、react组件数据传值对比分析——父组件传递子组件,子组件传递父组件
77 0
|
6月前
父组件可以监听到子组件的生命周期吗
父组件可以监听到子组件的生命周期吗
37 0
|
6月前
|
小程序
子组件调用父组件的方法并传递数据
子组件调用父组件的方法并传递数据
|
JavaScript
Vue 在父(子)组件引用其子(父)组件方法和属性
Vue 在父(子)组件引用其子(父)组件方法和属性
240 0
|
JavaScript
Vue组件使用(父组件监听子组件数据变化,子组件使用父组件的数据,并监听父组件的数据变化)
Vue组件使用(父组件监听子组件数据变化,子组件使用父组件的数据,并监听父组件的数据变化)
488 0