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触发父组件内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

基于Vue2的独立构建与运行时构建的差别(详解)
下面小编就为大家分享一篇基于Vue2的独立构建与运行时构建的差别详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2017-12-12
Vue 监听元素前后变化值实例
这篇文章主要介绍了Vue 监听元素前后变化值实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
Vue中通过vue-router实现命名视图的问题
这篇文章主要介绍了在Vue中通过vue-router实现命名视图,本文给大家提到了vue-router的原理解析，给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2020-04-04
用uniapp写一个好看的登录页面
随着移动互联网的发展,移动端app的使用越来越普及,而对于开发者来说如何设计一款简单易用的app是一项不容忽视的工作,其中登录页面是app使用过程中最基础的组成部分之一,这篇文章主要给大家介绍了关于用uniapp写一个好看的登录页面的相关资料,需要的朋友可以参考下
2024-03-03
Vue3 v-bind 指令的基本用法
在 Vue 3 中,v-bind 指令用于将表达式的值绑定到 DOM 元素的属性上,这个指令的语法与 Vue 2 相同,但有一些细微的变化和改进,这篇文章主要介绍了Vue3 v-bind 指令的基本用法,需要的朋友可以参考下
2024-08-08
Vue.js 使用v-cloak后仍显示变量的解决方法
这篇文章主要介绍了Vue.js 使用v-cloak后仍显示变量的解决方法 ,文中给大家提到了v-cloak的用法，需要的朋友可以参考下
2018-11-11
Vue中设置背景图片和透明度的简单方法
在做项目的时候常需要设置背景图片和透明度,下面这篇文章主要给大家介绍了关于Vue中设置背景图片和透明度的简单方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
2023-01-01
vue 实现路由跳转时更改页面title
今天小编就为大家分享一篇vue 实现路由跳转时更改页面title，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue的路由动态重定向和导航守卫实例
下面小编就为大家分享一篇Vue的路由动态重定向和导航守卫实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
webpack配置导致字体图标无法显示的解决方法
下面小编就为大家分享一篇webpack配置导致字体图标无法显示的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03