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

 
相关文章
|
9月前
|
JavaScript
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
Vue2中子组件调用父组件的方法,父组件调用子组件的方法,父子组件互相传值和方法调用
|
JavaScript 开发者
组件传值-子组件通过事件调用向父组件传值|学习笔记
快速学习组件传值-子组件通过事件调用向父组件传值
122 0
组件传值-子组件通过事件调用向父组件传值|学习笔记
|
8月前
|
JavaScript
子组件向父组件传参的方式?
子组件向父组件传参的方式?
119 0
|
JavaScript 前端开发 API
父组件异步请求到的数据,要在子组件显示
父组件异步请求到的数据,要在子组件显示(父传子,子传父)
父组件异步请求到的数据,要在子组件显示
|
9月前
|
小程序
子组件调用父组件的方法并传递数据
子组件调用父组件的方法并传递数据
106 0
|
9月前
有关子组件修改父组件传值报错问题
有关子组件修改父组件传值报错问题
58 0
|
9月前
父组件可以监听到子组件的生命周期吗
父组件可以监听到子组件的生命周期吗
47 0
|
前端开发 API
react如何在父组件中调用子组件事件
react如何在父组件中调用子组件事件
Vue-自定义事件之—— 子组件修改父组件的值
如何利用自定义的事件,在子组件中修改父组件里边的值? 关键点记住:三个事件名字 步骤如下: 这里,相对本案例,父组件定义为Second-module,对应的子组件是Three-module   第一步:你要想改动父组件的值,你父组件得先有值让你改吧!所以,   在父组件定义值:     第二步:同样...
1188 0

热门文章

最新文章