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数据，调用函数
写一个兄弟组件之间传递数据，父组件调用方法的案例： 
第一个子组件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 父组件 调用 子组件的方法的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。