美文网首页
vue关于父组件调用子组件的方法

vue关于父组件调用子组件的方法

作者: 忘记_3a6a | 来源:发表于2020-04-12 16:41 被阅读0次
  • 子组件:
<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>
```
原文链接:https://blog.csdn.net/qq_34664239/java/article/details/80386153

相关文章

网友评论

      本文标题:vue关于父组件调用子组件的方法

      本文链接:https://www.haomeiwen.com/subject/ltkbmhtx.html