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ù)，在點擊事件里通過 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()方法進行事件的傳出，其他同上
子組件
<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中的動態(tài)組件component和keep-alive
這篇文章主要介紹了詳解vue中的動態(tài)組件component和keep-alive的相關(guān)資料,這大家需要注意include屬性和exclude屬性只能用一個,不能同時使用,本文給大家介紹的非常詳細,需要的朋友參考下吧2023-11-11
如何利用vue展示.docx文件、excel文件和csv文件內(nèi)容
最近遇到了一些新的需求,需要前端實現(xiàn)文件預(yù)覽功能,下面這篇文章主要給大家介紹了關(guān)于如何利用vue展示.docx文件、excel文件和csv文件內(nèi)容的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-04-04
Vue.js結(jié)合bootstrap前端實現(xiàn)分頁和排序效果
這篇文章主要為大家詳細介紹了Vue.js結(jié)合bootstrap 前端實現(xiàn)分頁和排序效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-12-12
Vue 的 keep-alive 是一個內(nèi)置組件,用于緩存不活動的組件實例,避免重復(fù)渲染,從而優(yōu)化應(yīng)用性能,下面就跟隨小編一起來看看其核心實現(xiàn)原理和緩存內(nèi)容吧2025-03-03
vue-devtools是一款基于chrome游覽器的插件，用于調(diào)試vue應(yīng)用，這可以極大地提高我們的調(diào)試效率，這篇文章主要介紹了vue devtools的安裝與使用教程,需要的朋友可以參考下2018-08-08
編寫Vue項目,如何給數(shù)組的第一位添加對象數(shù)據(jù)
這篇文章主要介紹了編寫Vue項目,如何給數(shù)組的第一位添加對象數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了解決vue頁面渲染但dom沒渲染的操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
Vue 開發(fā)音樂播放器之歌手頁右側(cè)快速入口功能
這篇文章主要介紹了Vue 開發(fā)音樂播放器之歌手頁右側(cè)快速入口功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-08-08
vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決
Vue項目devServer.proxy代理配置詳解的是一個非常常見的需求,下面這篇文章主要給大家介紹了關(guān)于vue.config.js中devServer.proxy配置說明及配置正確不生效問題解決的相關(guān)資料,需要的朋友可以參考下2023-02-02
Vue?中如何使用?el-date-picker?限制只能選擇當(dāng)天、當(dāng)天之前或當(dāng)天之后日期的方法詳解
在Vue前端開發(fā)中，使用 el-date-picker 組件進行日期選擇是常見的需求，有時候我們需要限制用戶只能選擇當(dāng)天、當(dāng)天之前或當(dāng)天之后的日期，本文將詳細介紹如何使用 el-date-picker 組件實現(xiàn)這些限制，讓你能夠輕松應(yīng)對各種日期選擇場景,需要的朋友可以參考下2023-09-09