vue3?setup語法糖下父組件如何調(diào)用子組件
更新時(shí)間：2024年03月04日 11:11:49 作者：左直拳
這篇文章主要介紹了vue3?setup語法糖下父組件如何調(diào)用子組件問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue3 setup語法糖下父組件調(diào)用子組件
vue3下，父組件調(diào)用子組件的方法，如果使用了<script setup> 這種寫法，那么子組件方法需要采用defineExpose()進(jìn)行修飾，才能被外界調(diào)用。
上代碼：
1、子組件
_pop.vue：
<template>
。。。
</template>
<script setup>
import { defineExpose } from "vue";
const popIt = () => {
。。。
};
defineExpose({ popIt });
</script>
2、父組件
<template> <pop pTitle="hehe" ref="pop1"></pop> </template> <script setup> import pop from "./_pop"; const pop1 = ref(); pop1.value.popIt(); </script>
vue3 父子組件相互調(diào)用
下面演示均為使用 setup 語法糖的情況！
參考網(wǎng)址：https://cn.vuejs.org/api/sfc-script-setup.html#defineexpose
父組件調(diào)用子組件方法
子組件需要使用defineExpose對(duì)外暴露方法，父組件才可以調(diào)用！
1.子組件
<template>
<div>我是子組件</div>
</template>
<script lang="ts" setup>
// 第一步：定義子組件的方法
const hello = (str: string) => {
console.log('子組件的hello方法執(zhí)行了--' + str)
}
// 第二部：暴露方法
defineExpose({
hello
})
</script>2.父組件
<template>
<button @click="getChild">觸發(fā)子組件方法</button>
<!-- 一：定義 ref -->
<Child ref="childRef"></Child>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
import Child from '../../components/child.vue';
// 二：定義與 ref 同名變量
const childRef = ref <any> ()
// 三、函數(shù)
const getChild = () => {
// 調(diào)用子組件的方法或者變量，通過value
childRef.value.hello("hello world！");
}
</script>3.測試結(jié)果
子組件調(diào)用父組件方法
1.父組件
<template>
<Child @sayHello="handle"></Child>
</template>
<script lang="ts" setup>
import Child from '../../components/child.vue';
const handle = () => {
console.log('子組件調(diào)用了父組件的方法')
}
</script>2.子組件
<template>
<view>我是子組件</view>
<button @click="say">調(diào)用父組件的方法</button>
</template>
<script lang="ts" setup>
const emit = defineEmits(["sayHello"])
const say = () => {
emit('sayHello')
}
</script>3.測試結(jié)果
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3不能使用history.pushState修改url參數(shù)踩坑
這篇文章主要為大家介紹了vue3不能使用history.pushState修改url參數(shù)踩坑解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
本文重點(diǎn)給大家介紹Vue拖拽組件開發(fā)實(shí)例，拖拽的原理是手指在移動(dòng)的過程中，實(shí)時(shí)改變?cè)氐奈恢眉磘op和left值，使元素隨著手指的移動(dòng)而移動(dòng)。對(duì)實(shí)例代碼感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05
在vue中我們使用模板HTML語法組建頁面的，使用render函數(shù)我們可以用js語言來構(gòu)建DOM，今天小編就通過本文給大家簡單介紹下Vue 中 render 函數(shù),需要的朋友可以參考下2020-02-02
這篇文章主要介紹了vue2 webpack proxy與nginx配置方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-10-10
尤雨溪開發(fā)vue?dev?server理解vite原理
這篇文章主要為大家介紹了尤雨溪開發(fā)的玩具vite，vue-dev-server來理解vite原理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
Vue 簡單實(shí)現(xiàn)前端權(quán)限控制的示例
這篇文章主要介紹了Vue 簡單實(shí)現(xiàn)前端權(quán)限控制的示例，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
vue中img標(biāo)簽的src屬性總結(jié)(問題解決)
初步接觸vue框架時(shí),好多朋友使用img標(biāo)簽時(shí),設(shè)置動(dòng)態(tài)src屬性時(shí),可能都會(huì)遇到路徑不生效的問題,本文給大家介紹vue中img標(biāo)簽的src屬性總結(jié),感興趣的朋友一起看看吧2023-11-11
vue+element UI實(shí)現(xiàn)樹形表格帶復(fù)選框的示例代碼
這篇文章主要介紹了vue+element UI實(shí)現(xiàn)樹形表格帶復(fù)選框的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
本篇文章主要介紹了詳解Vue 非父子組件通信方法（非Vuex），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
Vue 路由 過渡動(dòng)效 數(shù)據(jù)獲取方法
這篇文章主要介紹了Vue 路由 過渡動(dòng)效 數(shù)據(jù)獲取方法，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-07-07