快捷導(dǎo)航

vue3父組件調(diào)用子組件方法的思路及實(shí)例代碼

更新時(shí)間：2025年06月28日 10:16:30 作者：愉快的小跳蛙

在Vue.js框架中父子組件之間的通信是常見的需求,其中父組件調(diào)用子組件的方法是實(shí)現(xiàn)特定功能的重要方式,這篇文章主要介紹了vue3父組件調(diào)用子組件方法的相關(guān)資料,需要的朋友可以參考下

1.子組件暴露表單驗(yàn)證方法

<template>
  <a-form ref="formRef" :model="formState" :rules="rules">
    <a-form-item label="用戶名" name="username">
      <a-input v-model:value="formState.username" />
    </a-form-item>
  </a-form>
</template>

<script setup>
import { ref } from 'vue';

const formRef = ref(); // 表單引用
const formState = ref({ username: '' }); // 表單數(shù)據(jù)
const rules = { // 驗(yàn)證規(guī)則
  username: [{ required: true, message: '請(qǐng)輸入用戶名' }]
};

// 暴露給父組件的驗(yàn)證方法
const validate = () => formRef.value.validate();

defineExpose({ validate }); // 暴露方法
</script>

2.父組件觸發(fā)子組件表單驗(yàn)證

<template>
  <ChildForm ref="childFormRef" />
  <a-button @click="handleSubmit">提交</a-button>
</template>

<script setup>
import { ref } from 'vue';
import ChildForm from './ChildForm.vue';

const childFormRef = ref(); // 子組件引用

const handleSubmit = async () => {
  try {
    const values = await childFormRef.value.validate();
    console.log('驗(yàn)證通過(guò)，數(shù)據(jù)：', values);
    // 提交數(shù)據(jù)邏輯...
  } catch (error) {
    console.log('驗(yàn)證失敗', error);
  }
};
</script>

總結(jié)

到此這篇關(guān)于vue3父組件調(diào)用子組件方法的文章就介紹到這了,更多相關(guān)vue3父組件調(diào)用子組件內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue3中的Refs和Ref詳情
這篇文章主要介紹了Vue3中的Refs和Ref，文章圍繞Vue3中的Refs和Ref得相關(guān)資料應(yīng)用舉例煩人方式展開詳細(xì)內(nèi)容,需要的朋友可以參考一下
2021-11-11
vue腳手架項(xiàng)目創(chuàng)建步驟詳解
這篇文章主要介紹了vue腳手架項(xiàng)目創(chuàng)建步驟詳解，文章講解的很清晰，初學(xué)者可以跟著步驟學(xué)習(xí)下
2021-03-03
VUE中使用路由router跳轉(zhuǎn)頁(yè)面多種方式
對(duì)于單頁(yè)應(yīng)用,官方提供了vue-router進(jìn)行路由跳轉(zhuǎn)的處理,這篇文章主要給大家介紹了關(guān)于VUE中使用路由router跳轉(zhuǎn)頁(yè)面的多種方式,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下
2025-05-05
基于Vue3實(shí)現(xiàn)一個(gè)簡(jiǎn)單的方位動(dòng)畫
這篇文章主要為大家詳細(xì)介紹了如何基于Vue3實(shí)現(xiàn)一個(gè)簡(jiǎn)單的方位動(dòng)畫,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2024-02-02
vue項(xiàng)目打包發(fā)布后接口報(bào)405錯(cuò)誤的解決
這篇文章主要介紹了vue項(xiàng)目打包發(fā)布后接口報(bào)405錯(cuò)誤的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
ant-design-vue按鈕樣式擴(kuò)展方法詳解
這篇文章主要為大家介紹了ant-design-vue按鈕樣式擴(kuò)展方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-06-06
Vue使用mind-map實(shí)現(xiàn)在線思維導(dǎo)圖
Vue中的Mind-Map通常是指使用Vue.js這個(gè)前端框架構(gòu)建的思維導(dǎo)圖組件或庫(kù),它可以幫助開發(fā)者在Web應(yīng)用中創(chuàng)建動(dòng)態(tài)、交互式的思維導(dǎo)圖,讓用戶可以直觀地組織信息和結(jié)構(gòu)化數(shù)據(jù),本文介紹了Vue使用mind-map實(shí)現(xiàn)在線思維導(dǎo)圖,需要的朋友可以參考下
2024-07-07
webpack安裝配置與常見使用過(guò)程詳解（結(jié)合vue）
這篇文章主要介紹了webpack安裝配置與常見使用過(guò)程，主要結(jié)合vue實(shí)現(xiàn)，通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-06-06
vue-cli2打包前和打包后的css前綴不一致的問(wèn)題解決
這篇文章主要介紹了vue-cli2打包前和打包后的css前綴不一致的問(wèn)題解決，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-08-08
vue-router使用next()跳轉(zhuǎn)到指定路徑時(shí)會(huì)無(wú)限循環(huán)問(wèn)題
這篇文章主要介紹了vue-router使用next()跳轉(zhuǎn)到指定路徑時(shí)會(huì)無(wú)限循環(huán)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2023-11-11