随笔 - 66  文章 - 0  评论 - 3  阅读 - 66526

Vue子组件调用父组件事件的三种方法

  • 1. 在子组件中通过this.$parent.event来调用父组件的方法,data参数可选

<template>
  <div>
    <h1>我是父组件</h1>
    <child />
  </div>
</template>
<script>
  import child from '@/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(data) {
        console.log('我是父组件方法');
      }
    }
  };
</script>
<template>
  <div>
    <h1>我是子组件</h1>
    <button @click="childMethod(data)">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$parent.fatherMethod(data);
        console.log('调用父组件方法')
      }
    }
  };
</script>
  • 2. 在子组件里用$emit向父组件触发一个事件,父组件监听这个事件,data参数可选

<template>
  <div>
    <h1>我是父组件</h1>
    <child @fatherMethod="fatherMethod"/>
  </div>
</template>
<script>
  import child from '@/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(data) {
        console.log('我是父组件方法');
      }
    }
  };
</script>
<template>
  <div>
    <h1>我是子组件</h1>
    <button @click="childMethod(data)">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod(data) {
       this.$emit('fatherMethod', data);
        console.log('调用父组件方法')
      }
    }
  };
</script>
  • 3. 父组件通过props把方法传入子组件中,在子组件里直接调用这个方法,data参数可选

<template>
  <div>
    <h1>我是父组件</h1>
    <child :fatherMethod="fatherMethod" />
  </div>
</template>
<script>
  import child from '@/components/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(data) {
        console.log('我是父组件方法');
      }
    }
  };
</script>
<template>
  <div>
    <h1>我是子组件</h1>
    <button @click="childMethod(data)">点击</button>
  </div>
</template>
<script>
  export default {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod(data) {
        if (this.fatherMethod) {
          this.fatherMethod(data);
          console.log('调用父组件传递的方法')
        }
      }
    }
  };
</script>
posted on   取个名字真wff  阅读(3526)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示