前些天發(fā)現(xiàn)了一個(gè)巨牛的人工智能學(xué)習(xí)網(wǎng)站，通俗易懂，風(fēng)趣幽默，忍不住分享一下給大家。點(diǎn)擊跳轉(zhuǎn)到教程。

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

例：?
子組件：

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

父組件： 在子組件中加上ref即可通過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ù)，通過調(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) }

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

轉(zhuǎn)自：https://blog.csdn.net/qq_34664239/article/details/80386153?
?

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。