vue3.0在子組件中觸發(fā)的父組件函數(shù)方式
更新時間：2022年04月29日 10:28:34 作者：Cirtus?Soda
這篇文章主要介紹了vue3.0在子組件中觸發(fā)的父組件函數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
注：本文是基于vue3.0的語法
方式一
- 在script中引入 defineEmit ，import { defineEmit } from 'vue' ;
- 通過defineEmit定義事件，例如：const emit = defineEmit(['myclick']);
- 子組件定義了ClickEmit 事件，并且返回了一個函數(shù)，在點(diǎn)擊事件里通過 emit("myclick") 傳遞出事件給父組件
- 在父組件中的 引用的子組件的標(biāo)簽上定義上要傳遞的事件，具體代碼如下
子組件
<template>
?
? //我派發(fā)出了事件，這個事件的命名為myclick，連接至父組件
? <button @click="emit('myclick')">Emit</button>
?
? //我啥都沒派發(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>?方式二
先獲取上下文對象，通過該對象的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>?以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue路由傳參-如何使用encodeURI加密參數(shù)
這篇文章主要介紹了vue路由傳參-如何使用encodeURI加密參數(shù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
這篇文章主要給大家介紹了關(guān)于Vue3?Transition組件給頁面切換并加上動畫效果的相關(guān)資料,vue的過渡動畫主要是transition標(biāo)簽的使用,配合css動畫實現(xiàn)的,需要的朋友可以參考下2023-06-06
這篇文章主要給大家介紹了關(guān)于如何完全掌握Vue中$set方法的相關(guān)資料,vue中$set方法對數(shù)組和對象的處理本質(zhì)上的一樣的,對新增的值添加響應(yīng)然后手動觸發(fā)派發(fā)更新,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了Vue?子組件傳父組件?$emit更新屬性方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-09-09
vue-admin-template框架搭建及應(yīng)用小結(jié)
?vue-admin-template是基于vue-element-admin的一套后臺管理系統(tǒng)基礎(chǔ)模板（最少精簡版），可作為模板進(jìn)行二次開發(fā)，這篇文章主要介紹了vue-admin-template框架搭建及應(yīng)用,需要的朋友可以參考下2023-05-05
使用vite搭建ssr活動頁架構(gòu)的實現(xiàn)
本文主要介紹了使用vite搭建ssr活動頁架構(gòu)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Vue項目配置、切換主題顏色詳細(xì)教程(mixin+scss方式,簡單高效)
這篇文章主要給大家介紹了關(guān)于Vue項目配置、切換主題顏色(mixin+scss方式)的相關(guān)資料,根據(jù)預(yù)設(shè)的配色方案,在前端實現(xiàn)動態(tài)切換系統(tǒng)主題顏色,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
element-ui中table組件的toggleRowSelection()方法使用
這篇文章主要介紹了element-ui中table組件的toggleRowSelection()方法使用,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了使用el-form之表單校驗自動定位到報錯位置問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
Vue 使用iframe引用html頁面實現(xiàn)vue和html頁面方法的調(diào)用操作
這篇文章主要介紹了Vue 使用iframe引用html頁面實現(xiàn)vue和html頁面方法的調(diào)用操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11