Vue子组件向父组件传值(this.$emit()方法)与vue中父组件向子组件传值-前端-E先生的博客
Java
MySQL
大数据
Python
前端
黑科技
大语言模型
    首页 >> 互联网 >> 前端

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

[导读]:子组件使用this.$emit()向父组件传值 首先必须在父组件中引用子组件,然后实现传值 第一步 在父组件中引入子组件 使用import引入组件 import indexImportOrder from ./components/indexImportOrder 声明 //定义组...

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

首先必须在父组件中引用子组件,然后实现传值

  • 第一步 在父组件中引入子组件

使用import引入组件

import indexImportOrder from './components/indexImportOrder'

声明
 

  1. //定义组件
  2.  
    components:{
  3.  
    indexImportOrder,
  4.  
    },
     
使用:
ref="indexImportOrder"/>
  • 第二步 子组件向父组件传值

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

  1. //新订单页面跳转
  2.  
    viewBusiness(){
  3.  
    let flag = false;
  4.  
    this.$emit('closeMain',flag);
  5.  
    },

2.  在父组件中子组件引用处添加函数v-on:function="function1"; //其中function为子组件中定义函数,function1为父组件定义函数--用于接收子组件传值并进行相应数据处理,可定义为同一名称

v-on: 可用 @ 代替 @function="function1" ,@ 为 v-on:的简写

ref="indexImportOrder" v-on:closeMain="closeMain"/>

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

 

  1. closeMain(val){
  2.  
    this.flag = val;
  3.  
    },
  1. //定义组件
  2.  
    components:{
  3.  
    indexImportOrder,
  4.  
    },

本文来自E先生的博客,如若转载,请注明出处:https://www.javajz.cn

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

欢迎加Easy的QQ