vue使用$emit传递参数方式

 更新时间:2024年04月18日 10:55:44   作者:荣~博客  
这篇文章主要介绍了vue使用$emit传递参数方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue使用$emit传递参数

传递一个参数

1、子组件

this.$emit('getData','abcd')

2、父组件

<child @getData="getData"></child>
getData(data){
	console.log(data) // 'abcd'
}

传递多个参数

第一种方法

  • 1、子组件
let obj = {
	data1: 'abcd',
	data2: 'abcdefg'
}
this.$emit('getData',obj)
  • 2、父组件
<child @getData="getData"></child>
getData(data){
	console.log(data) // {data1:'abcd',data2:'abcdefg'}
}

第二种方法

  • 1、子组件
this.$emit('getData','abcd','abcdefg')
  • 2、父组件
<child @getData="getData(arguments)"></child>
getData(data){
	console.log(data[0],data[1]) // 'abcd' 'abcdefg'
}

对于$emit的用法

可以总结:

  • 子组件通过$emit的方式,调用父组件中的事件,进行传递数据
  • $emit函数只能在子组件中使用

一、子组件

  <div>
    <!-- 1 给子组件绑定一个点击事件 -->
    <el-button type="primary" size="small" @click="btnFn">我是子组件</el-button>
  </div>
</template>

<script>
export default {
  methods: {
    // 2 声明事件处理函数
    btnFn() {
      console.log("点击到了");
      // 3 子传父
      // 执行$emit函数,会调用父组件中名为sonEvent的函数再将"hello world"的值传过去
      this.$emit("sonEvent", "hello world");
    },
  },
};
</script>

从上面子组件的代码上看,我们可以知道,当子组件被点击的时候,会触发btnFn事件,再声明btnFn()事件处理函数,之后执行$emit函数,该emit函数会调用下面父组件中名为sonEvent的事件,并将“hello world”的值传递给父组件。

二、父组件

  <div id="app">
    <!-- 4 接收子传父 @inputFn="fatInput" -->
    <!-- @sonEvent 与子组件this.$emit('sonEvent',...)起的名字一致 -->
    <son @sonEvent="sonFn"></son>
  </div>
</template>

<script>
import son from "./components/son.vue";
export default {
  name: "app",
  components: {
    son,
  },
  methods: {
    // 5 接收参数
    sonFn(data) {
      console.log(data);
    },
  },
};
</script>

父组件的sonEvent事件被触发,调用sonFn函数,可以在控制台上打印接收到子组件传递过来的值

三、运行结果

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue-Access-Control 前端用户权限控制解决方案

    Vue-Access-Control 前端用户权限控制解决方案

    Vue-Access-Control是一套基于Vue/Vue-Router/axios 实现的前端用户权限控制解决方案。这篇文章主要介绍了Vue-Access-Control:前端用户权限控制解决方案,需要的朋友可以参考下
    2017-12-12
  • Vue实现动态查询规则生成组件

    Vue实现动态查询规则生成组件

    今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景,本文主要介绍了Vue动态查询规则生成组件,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • Vue项目导入字体文件的方法步骤

    Vue项目导入字体文件的方法步骤

    有些时候客户希望产品使用他们公司要求的字体,这个时候我们需要将客户提供的字体文件引入到项目中,下面这篇文章主要给大家介绍了关于Vue项目导入字体文件的方法步骤,需要的朋友可以参考下
    2024-03-03
  • Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法

    Vue报错Syntax Error:TypeError: this.getOptions is not a 

    前几天在vue运行项目过程中报错了,所以下面这篇文章主要给大家介绍了关于Vue报错Syntax Error:TypeError: this.getOptions is not a function的解决方法,需要的朋友可以参考下
    2022-07-07
  • Vue 3.0 前瞻Vue Function API新特性体验

    Vue 3.0 前瞻Vue Function API新特性体验

    这篇文章主要介绍了Vue 3.0 前瞻Vue Function API新特性体验,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-08-08
  • Vue v2.4中新增的$attrs及$listeners属性使用教程

    Vue v2.4中新增的$attrs及$listeners属性使用教程

    这篇文章主要给大家介绍了关于Vue v2.4中新增的$attrs及$listeners属性的使用方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2018-01-01
  • 解决vue点击控制单个样式的问题

    解决vue点击控制单个样式的问题

    今天小编就为大家分享一篇解决vue点击控制单个样式的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue2.0 + ele的循环表单及验证字段方法

    vue2.0 + ele的循环表单及验证字段方法

    今天小编就为大家分享一篇vue2.0 + ele的循环表单及验证字段方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue-cli4.0多环境配置变量与模式详解

    vue-cli4.0多环境配置变量与模式详解

    这篇文章主要介绍了vue-cli4.0多环境配置变量与模式详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-12-12
  • vue3+vite配置多页面的示例代码

    vue3+vite配置多页面的示例代码

    通过配置多页面应用,从而将给子模块依赖分隔开各自加载,可以减少初始资源的请求,加快页面的访问速度,这篇文章主要介绍了vue3+vite配置多页面的详细过程,需要的朋友可以参考下
    2023-06-06

最新评论