關于vue父組件調用子組件的方法

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

本文主要介紹了vue父組件調用子組件的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

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

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

我們都知道通過$ref可以獲取到某個DOM，但是它也可以用來獲取子組件的實例，調用子組件的方法

例：

子組件：

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

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

父組件：在子組件中加上ref即可通過this.$refs.ref.method調用

<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) //返回的是一個vue對象，所以可以直接調用其方法
? ? ? ? this.$refs.child1.childMethod(this.flag);?
? ? ? }
? ? }
? }
</script>

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

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

父組件接收數(shù)據(jù)，并將數(shù)據(jù)，通過調用另一個子組件shopcart 的方法傳遞給另一個子組件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('調用另一個子組件的方法')
    console.log(el)
}

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

您可能感興趣的文章:

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