快捷導(dǎo)航

vue3.0在子組件中觸發(fā)的父組件函數(shù)方式

更新時(shí)間：2022年04月29日 10:28:34 作者：Cirtus?Soda

這篇文章主要介紹了vue3.0在子組件中觸發(fā)的父組件函數(shù)方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

方式一

在script中引入 defineEmit ，import { defineEmit } from 'vue' ;
通過(guò)defineEmit定義事件，例如：const emit = defineEmit(['myclick']);
子組件定義了ClickEmit 事件，并且返回了一個(gè)函數(shù)，在點(diǎn)擊事件里通過(guò) emit("myclick") 傳遞出事件給父組件
在父組件中的引用的子組件的標(biāo)簽上定義上要傳遞的事件，具體代碼如下

子組件

<template>
?
? //我派發(fā)出了事件，這個(gè)事件的命名為myclick，連接至父組件
? <button @click="emit('myclick')">Emit</button>
?
? //我啥都沒(méi)派發(fā)
? <button>noneEmit</button>
?
</template>

<script setup>
import { defineEmit } from 'vue' ?
?
// 定義派發(fā)事件
const emit = defineEmit(['myclick'])
?
</script>

父組件

<template>?
?
? //子組件使用通信的 @myclick事件 → 使用父組件函數(shù)
? <HelloWorld @myclick="onmyclick"/>
?
</template>

<script setup>
?
//導(dǎo)入子組件
import HelloWorld from './components/HelloWorld.vue';?
?
//子組件使用使用父組件函數(shù)
const onmyclick = () => {
? console.log(" Come from HelloWorld! ");
}?
?
</script>?

方式二

先獲取上下文對(duì)象，通過(guò)該對(duì)象的emit()方法進(jìn)行事件的傳出，其他同上

子組件

<template> ?
? <button @click="emitclick">emitclick</button>
</template>

<script setup>?
import { useContext } from 'vue'?
?
// 獲取上下文
const ctx = useContext();?
const emitclick = () => {?
? ctx.emit('myclick');
}?
</script>?

父組件

<template>?
?
? //子組件使用通信的 @myclick事件 → 使用父組件函數(shù)
? <HelloWorld @myclick="onmyclick"/>
</template>?

<script setup>
import HelloWorld from './components/HelloWorld.vue';
?
const onmyclick = () => {
? console.log(" Come from HelloWorld! ");
}?
</script>?

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue路由傳參-如何使用encodeURI加密參數(shù)
這篇文章主要介紹了vue路由傳參-如何使用encodeURI加密參數(shù)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-06-06
Vue3?Transition組件給頁(yè)面切換并加上動(dòng)畫(huà)效果
這篇文章主要給大家介紹了關(guān)于Vue3?Transition組件給頁(yè)面切換并加上動(dòng)畫(huà)效果的相關(guān)資料,vue的過(guò)渡動(dòng)畫(huà)主要是transition標(biāo)簽的使用,配合css動(dòng)畫(huà)實(shí)現(xiàn)的,需要的朋友可以參考下
2023-06-06
一文完全掌握Vue中的$set方法
這篇文章主要給大家介紹了關(guān)于如何完全掌握Vue中$set方法的相關(guān)資料,vue中$set方法對(duì)數(shù)組和對(duì)象的處理本質(zhì)上的一樣的,對(duì)新增的值添加響應(yīng)然后手動(dòng)觸發(fā)派發(fā)更新,需要的朋友可以參考下
2023-11-11
Vue?子組件傳父組件?$emit更新屬性方式
這篇文章主要介紹了Vue?子組件傳父組件?$emit更新屬性方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-09-09
vue-admin-template框架搭建及應(yīng)用小結(jié)
?vue-admin-template是基于vue-element-admin的一套后臺(tái)管理系統(tǒng)基礎(chǔ)模板（最少精簡(jiǎn)版），可作為模板進(jìn)行二次開(kāi)發(fā)，這篇文章主要介紹了vue-admin-template框架搭建及應(yīng)用,需要的朋友可以參考下
2023-05-05
使用vite搭建ssr活動(dòng)頁(yè)架構(gòu)的實(shí)現(xiàn)
本文主要介紹了使用vite搭建ssr活動(dòng)頁(yè)架構(gòu)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2022-07-07
Vue項(xiàng)目配置、切換主題顏色詳細(xì)教程(mixin+scss方式,簡(jiǎn)單高效)
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目配置、切換主題顏色(mixin+scss方式)的相關(guān)資料,根據(jù)預(yù)設(shè)的配色方案,在前端實(shí)現(xiàn)動(dòng)態(tài)切換系統(tǒng)主題顏色,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下
2023-11-11
element-ui中table組件的toggleRowSelection()方法使用
這篇文章主要介紹了element-ui中table組件的toggleRowSelection()方法使用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-03-03
使用el-form之表單校驗(yàn)自動(dòng)定位到報(bào)錯(cuò)位置問(wèn)題
這篇文章主要介紹了使用el-form之表單校驗(yàn)自動(dòng)定位到報(bào)錯(cuò)位置問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-05-05
Vue 使用iframe引用html頁(yè)面實(shí)現(xiàn)vue和html頁(yè)面方法的調(diào)用操作
這篇文章主要介紹了Vue 使用iframe引用html頁(yè)面實(shí)現(xiàn)vue和html頁(yè)面方法的調(diào)用操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-11-11