zoukankan      html  css  js  c++  java
  • 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")    //事件发射
          }
     }
  • 相关阅读:
    BootStrap练习
    表单控件练习
    K近邻算法原理
    CSS 边框和颜色
    SVG平移和旋转
    SVG进阶练习
    SVG路标(marker)
    SVG 曲线与文字
    python函数与异常处理
    if-elif-else分支判断语句(附加continue和break)---举例说明
  • 原文地址:https://www.cnblogs.com/xibaomeng/p/14357548.html
Copyright © 2011-2022 走看看