vue3触发父组件两种写法

更新时间：2023年08月17日 11:29:18 作者：007。

这篇文章主要介绍了vue3触发父组件两种写法,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

vue3触发父组件两种写法

1、正常写法

子组件：

import { defineComponent } from 'vue';
export default defineComponent({
  emits: ["testEmi"],
  setup(props, context) {
    const changeCollapse = () => {
        //触发父组件事件 
      context.emit("testEmi")
    }
    return {
      testEmi
    }
  }
})

父组件：

<test @testEmit="testEmi" />

2、语法糖写法

子组件：

const emit = defineEmits(["downloadTemp"]);
const downloadTemp = () => {
  emit("downloadTemp", "12");
};

父组件：

<UpDownload @downloadTemp="downloadTempSms"/>

在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits

补充：vue子组件调用父组件的3种方法，超实用

1. 直接在子组件中通过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();
      }
    }
  };

2. 在子组件里用$emit向父组件触发一个事件，父组件监听这个事件

父组件：

<template>
  <div>
    <child @fMethod="fatherMethod"></child>
  </div>
</template>
<script>
  import child from '~/components/dam/child';
  export default {
    components: {
      child
    },
    methods: {
      fatherMethod(data) {
        console.log(data);
      }
    }
  };
</script>

子组件：

<template>
  <div>
    <button @click="childMethod()">点击</button>
  </div>
</template>
<script>
  export default {
    methods: {
      childMethod() {
        this.$emit('fMethod',data);
      }
    }
  };
</script>

3. 父组件把方法传入子组件中，在子组件里直接调用

父组件：

<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 {
    props: {
      fatherMethod: {
        type: Function,
        default: null
      }
    },
    methods: {
      childMethod() {
        if (this.fatherMethod) {
          this.fatherMethod();
        }
      }
    }
  };
</script>

到此这篇关于vue3触发父组件两种写法的文章就介绍到这了,更多相关vue3触发父组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

在vue中解决提示警告 for循环报错的方法
今天小编就为大家分享一篇在vue中解决提示警告 for循环报错的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
浅谈ElementUI中switch回调函数change的参数问题
今天小编就为大家分享一篇浅谈ElementUI中switch回调函数change的参数问题，具有很好的价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-08-08
Vue js如何用split切分并去掉空值和item的空格
这篇文章主要介绍了Vue js如何用split切分并去掉空值和item的空格，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-06-06
vue draggable组件实现拖拽及点击无效问题的解决
这篇文章主要介绍了vue draggable组件实现拖拽及点击无效问题的解决,只需要在设置handle属性就可以了，.defaultTypeTag 是要拖拽的块的类名，要注意的是需要做点击事件的项不能包含在这个类名里面，不然会无法触发点击事件，详细解决办法跟随小编一起学习吧
2022-05-05
Vue使用vm.$set()解决对象新增属性不能响应的问题
这篇文章主要介绍了Vue使用vm.$set()解决对象新增属性不能响应的问题,为了解决这个问题，Vue提供了一个特殊的方法vm.$set(object, propertyName, value)，也可以使用全局的Vue.set(object, propertyName, value)方法，需要的朋友可以参考下
2023-05-05
vue2.0+vuex+localStorage代办事项应用实现详解
本篇文章给大家分享了一个用vue2.0+vuex+localStorage代办事项应用实现的代码过程，有兴趣的朋友跟着参考学习下。
2018-05-05
vue iview实现动态新增和删除
这篇文章主要为大家详细介绍了vue iview实现动态新增和删除，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-06-06
vue如何监听某个元素的大小变化
这篇文章主要介绍了vue如何监听某个元素的大小变化问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
vue 中使用 this 更新数据的一次问题记录
这篇文章主要介绍了vue 中使用 this 更新数据的一次大坑 ,我在 vue 实例中声明了一个数组属性如 books: []，在异步请求的回调函数中使用 this.books = res.data.data; 进行数据更新，感兴趣的朋友跟随小编一起看看吧
2022-11-11
基于vue实现swipe轮播组件实例代码
本篇文章主要介绍了基于vue实现swipe轮播组件实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05