快捷導(dǎo)航

關(guān)于vue父組件調(diào)用子組件的方法

更新時(shí)間：2022年04月24日 10:26:24 作者：baby加油_

本文主要介紹了vue父組件調(diào)用子組件的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

組件 (Component) 是 Vue.js 最強(qiáng)大的功能之一。組件可以擴(kuò)展 HTML 元素，封裝可重用的代碼。在較高層面上，組件是自定義元素，Vue.js 的編譯器為它添加特殊功能。在有些情況下，組件也可以表現(xiàn)為用 is 特性進(jìn)行了擴(kuò)展的原生 HTML 元素。

所有的 Vue 組件同時(shí)也都是 Vue 的實(shí)例，所以可接受相同的選項(xiàng)對(duì)象 (除了一些根級(jí)特有的選項(xiàng)) 并提供相同的生命周期鉤子。

我們都知道通過(guò)$ref可以獲取到某個(gè)DOM，但是它也可以用來(lái)獲取子組件的實(shí)例，調(diào)用子組件的方法

例：

子組件：

<template>
? <div></div>
</template>

<script>
? export default {
? ? methods:{
? ? ? childMethod(flag) {
? ? ? ? console.log(flag)
? ? ? }
? ? },
? ? created(){
? ? }
? }
</script>

父組件：在子組件中加上ref即可通過(guò)this.$refs.ref.method調(diào)用

<template>
? <div @click="parentMethod">
? ? <children ref="child1"></children>
? </div>
</template>

<script>
? import children from 'components/children/children.vue'
? export default {
? ? ?data(){
? ? ? return {
? ? ? ? flag: true
? ? ? }
? ? },
? ? components: { ? ? ?
? ? ? 'children': children
? ? },
? ? methods:{
? ? ? parentMethod() {
? ? ? ? console.log(this.$refs.child1) //返回的是一個(gè)vue對(duì)象，所以可以直接調(diào)用其方法
? ? ? ? this.$refs.child1.childMethod(this.flag);?
? ? ? }
? ? }
? }
</script>

例子，兄弟組件間傳遞DOM數(shù)據(jù)，調(diào)用函數(shù)
寫一個(gè)兄弟組件之間傳遞數(shù)據(jù)，父組件調(diào)用方法的案例：
第一個(gè)子組件cartcont，發(fā)射數(shù)據(jù)

this.$emit('cartadd', event.target);

父組件接收數(shù)據(jù)，并將數(shù)據(jù)，通過(guò)調(diào)用另一個(gè)子組件shopcart 的方法傳遞給另一個(gè)子組件shopcart

<v-cartcont :food="food" @cartadd='_drop'></v-cartcont>
<v-shopcart ref='shopcart'></v-shopcart>

_drop(target){
? ? console.log('父組件接收數(shù)據(jù)')
? ? this.$refs.shopcart.drop(target);
}

shopcart子組件的方法

drop(el){
    console.log('調(diào)用另一個(gè)子組件的方法')
    console.log(el)
}

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

您可能感興趣的文章:

相關(guān)文章

vue+webpack中配置ESLint
這篇文章主要介紹了vue+webpack中配置ESLint，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
Vue3+Element?Plus實(shí)現(xiàn)el-table跨行顯示(非腳手架)
這篇文章主要介紹了Vue3+Element Plus實(shí)現(xiàn)el-table跨行顯示(非腳手架),本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-09-09
vue中使用scrollTo沒(méi)有效果的完美解決方法
這篇文章主要介紹了在vue中使用scrollTo沒(méi)有效果的解決方法,本文給大家分享具體操作步驟,在這里需要注意scrollTo要作用在可滾動(dòng)的元素上,不然不生效,scrollTop就會(huì)一直為0,需要的朋友可以參考下
2023-10-10
vue環(huán)境搭建簡(jiǎn)單教程
這篇文章主要介紹了vue環(huán)境搭建簡(jiǎn)單教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-11-11
vue v-viewer組件使用示例詳解(v-viewer輪播圖)
這篇文章主要介紹了vue v-viewer組件使用示例詳解(v-viewer輪播圖),本文結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2023-02-02
Laravel 如何在blade文件中使用Vue組件的示例代碼
這篇文章主要介紹了Laravel 如何在blade文件中使用Vue組件,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-06-06
vue3實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊菜單欄的幾種方式簡(jiǎn)單總結(jié)
在做開發(fā)中都會(huì)遇到的需求,每個(gè)用戶的權(quán)限是不一樣的,那他可以訪問(wèn)的頁(yè)面(路由)可以操作的菜單選項(xiàng)是不一樣的,如果由后端控制,我們前端需要去實(shí)現(xiàn)動(dòng)態(tài)路由,動(dòng)態(tài)渲染側(cè)邊菜單欄,這篇文章主要給大家介紹了關(guān)于vue3實(shí)現(xiàn)動(dòng)態(tài)側(cè)邊菜單欄的幾種方式,需要的朋友可以參考下
2024-02-02
vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理
這篇文章主要為大家介紹了vue前端重構(gòu)computed及watch組件通信等實(shí)用技巧整理，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-05-05
vue3.0?移動(dòng)端二次封裝van-uploader實(shí)現(xiàn)上傳圖片(vant組件庫(kù))
這篇文章主要介紹了vue3.0?移動(dòng)端二次封裝van-uploader上傳圖片組件,此功能最多上傳6張圖片，并可以實(shí)現(xiàn)本地預(yù)覽，實(shí)現(xiàn)代碼簡(jiǎn)單易懂，需要的朋友可以參考下
2022-05-05
教你在vue項(xiàng)目中使用svg圖標(biāo)的方法
本文給大家介紹了在vue項(xiàng)目中使用svg圖標(biāo)的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧
2022-04-04