前些天發現了一個巨牛的人工智能學習網站，通俗易懂，風趣幽默，忍不住分享一下給大家。點擊跳轉到教程。

我們都知道通過$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數據，調用函數
寫一個兄弟組件之間傳遞數據，父組件調用方法的案例：?
第一個子組件cartcont，發射數據

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

父組件接收數據，并將數據，通過調用另一個子組件shopcart 的方法傳遞給另一個子組件shopcart

<v-cartcont :food="food" @cartadd='_drop'></v-cartcont> <v-shopcart ref='shopcart'></v-shopcart>_drop(target){console.log('父組件接收數據')this.$refs.shopcart.drop(target); }

shopcart子組件的方法

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

---------------------?

轉自：https://blog.csdn.net/qq_34664239/article/details/80386153?
?

總結

以上是生活随笔為你收集整理的vue 父组件 调用 子组件的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。