昏喽喽

vuePress-theme-reco Lio    2020 - 2025
昏喽喽

Choose mode

  • dark
  • auto
  • light
Home
Category
  • CentOS
  • Csharp
  • DataBase
  • DesignMode
  • Vue
  • FrontEnd
  • GLD
  • Kingdee
  • NetWork
Tags
TimeLine
Tools
  • Http请求
  • 日志配置
  • 加密解密
  • 验证码
  • Git命令
About
author-avatar

Lio

103

Articles

15

Tags

Home
Category
  • CentOS
  • Csharp
  • DataBase
  • DesignMode
  • Vue
  • FrontEnd
  • GLD
  • Kingdee
  • NetWork
Tags
TimeLine
Tools
  • Http请求
  • 日志配置
  • 加密解密
  • 验证码
  • Git命令
About

this.$emit()方法 Vue子组件向父组件传值

vuePress-theme-reco Lio    2020 - 2025

this.$emit()方法 Vue子组件向父组件传值

Lio 2020-08-14 Vue

# 子组件使用this.$emit()向父组件传值

# 在父组件中引入子组件

<indexOrder ref="indexImportOrder" @closeMain="closeMain"/>

import indexOrder from './components/indexOrder'

components:{
        indexOrder
      }
1
2
3
4
5
6
7

# 子组件向父组件传值

1.使用this.$emit("function",param) 其中function为父组件定义函数,param为需要传递参数

viewBusiness(){
  let flag = false;
  this.$emit('closeMain',flag);
},
1
2
3
4

2.在父组件中子组件引用处添加函数@:function="function" 其中function为子组件中定义函数

<indexOrder ref="indexOrder" v-on:closeMain="closeMain"/>

<indexOrder ref="indexOrder" @closeMain="closeMain"/>
1
2
3

3.val及为子组件中flag,即接收的子组件参数

closeMain(val){
  this.flag = val;
}
1
2
3