vue獲取驗證碼倒計時，自定義組件點擊事件不生效的問題

說明：部分組件使用的是element-ui

子組件

<template>
  <div class="count-down">
    <el-button type="primary" size="small" style="width:80px;" :disabled="disabled || time > 0">
      {{ text }}
    </el-button>
  </div>
</template>

<script type="text/javascript">
export default {
  data() {
    return {
      time: 0
    };
  },
  props: {
    second: {
      type: Number,
      default: 5
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    run: function() {
      this.time = this.second;
      this.timer();
    },
    timer: function() {
      if (this.time > 0) {
        this.time--;
        setTimeout(this.timer, 1000);
      }
    }
  },
  computed: {
    text: function() {
      return this.time > 0 ? this.time + "s" : "獲取驗證碼";
    }
  }
};
</script>

父組件

<template>
    <div>
        <count-down :disabled="disabled" @click="send" ref="btn"></count-down>
    </div>
</template>    

export default {
        data () {
                return {
                    disabled: false
                }
        },
        methods: {
                send: function () {
                    this.disabled = true;
                    setTimeout(this.sended, 1000);
                },
                 sended() {
                    this.$refs.btn.run();
                    this.disabled = false;
                }
        }
}
               

這樣寫的時候，父組件的click事件是不生效的，在給某個組件監聽一個原生事件的時候可以使用v-on的修飾符.native

<count-down :disabled="disabled" @click.native="GetVerifyCode" ref="countDownBtn"></count-down>

這樣點擊事件就生效了