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给组件传递不同的值方法
今天小编就为大家分享一篇vue给组件传递不同的值方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue + echarts实现中国省份地图点击联动
这篇文章主要介绍了vue + echarts实现中国地图省份点击联动,需要的朋友可以参考下
2022-04-04
vue2中filter()的实现代码
vue2.0里，不再有自带的过滤器，需要自己定义过滤器。下面通过实例代码给大家介绍vue2中filter()的相关知识，感兴趣的朋友一起看看吧
2017-07-07
vue3封装轮播图组件的方法
这篇文章主要为大家详细介绍了vue3封装轮播图组件的方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
vue.js提交按钮时进行简单的if判断表达式详解
这篇文章主要给大家介绍了关于vue.js提交按钮时如何进行简单的if判断表达式的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-08-08
Vue3使用Proxy实现数据监听的原因分析
在本篇文章里小编给大家整理的是一篇关于Vue3使用Proxy实现数据监听的原因分析内容，有需要的朋友们可以跟着学习参考下。
2021-11-11
vue2 拖动排序 vuedraggable组件的实现
这篇文章主要介绍了vue2 拖动排序 vuedraggable组件的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
Vue ElementUI在el-table中使用el-popover问题
这篇文章主要介绍了Vue ElementUI在el-table中使用el-popover问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
Vue-cli3.X使用px2 rem遇到的问题及解决方法
这篇文章主要介绍了Vue-cli3.X使用px2rem遇到的问题及解决方法，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-08-08
Vue3中ref与reactive的详解与扩展
在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,下面这篇文章主要给大家介绍了关于Vue3中ref与reactive的相关资料,需要的朋友可以参考下
2021-06-06