Vue组件 父组件使用子组件中的值(子组件给父组件传值的方法)

父组件给子组件传值使用props自定义属性来实现,子组件传值给父组件可以用自定义事件和事件发射来实现,以下是具体实现方法。

一、父组件内容  @isErrShow自定义事件

<template>
  <div class="certification">
       <Success v-if="successShow"></Success>
       <error v-if="errorShow" @isErrShow="isErrshow"></error>        // @isErrShow自定义方法
       <Now v-if="nowShow"></Now>
  </div>
</template>

二、父组件方法

methods:{
    isErrshow(data){
           //data就是子组件传过来的值
            console.log(data)
            this.data=data;
        
      }

}        

三、子组件内容

<template>
  <div>
          <el-button type="danger" @click="togo">重新认证</el-button>
  </div>
</template>

四、子组件传值方法,通过this.$emit(name,value)。name对应的是父组件自定义方法的名称,value则是子组件需要传给父组件的值。

 methods: {
      togo(){
        this.$emit('isErrShow',"1")    //事件发射
      }
 }

 

posted @ 2021-02-01 16:54  MengZz  阅读(1670)  评论(0编辑  收藏  举报