码迷,mamicode.com
首页 > 其他好文 > 详细

Vue子组件调用父组件的方法

时间:2020-06-19 23:14:40      阅读:64      评论:0      收藏:0      [点我收藏+]

标签:event   通过   log   The   pos   mit   www   class   strong   

Vue中子组件调用父组件的方法,这里有三种方法提供参考,第三种方式是将父组件的方法传到子组件,这不是很常用,就不记录了,原文https://www.cnblogs.com/jin-zhe/p/9523782.html

第一种方法是直接在子组件中通过this.$parent.event来调用父组件的方法

父组件

技术图片
<template>
  <div>
    <child></child>
  </div>
</template>
<script>
  import child from ‘~/components/dam/child‘;
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log(‘测试‘);
      }
    }
  };
</script>
技术图片

子组件

技术图片
<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod();
      }
    }
  };
</script>
技术图片

 

第二种方法是在子组件里用$emit向父组件触发一个事件,父组件监听这个事件就行了。

父组件

技术图片
<template>
  <div>
    <child @fatherMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from ‘~/components/dam/child‘;
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod() {
        console.log(‘测试‘);
      }
    }
  };
</script>
技术图片

子组件

技术图片
<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit(‘fatherMethod‘);
      }
    }
  };
</script>
技术图片

Vue子组件调用父组件的方法

标签:event   通过   log   The   pos   mit   www   class   strong   

原文地址:https://www.cnblogs.com/xiaoliu66007/p/13166702.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!