2017-8-21

1. 給組件綁定原生事件

有時(shí)候，你可能想在某個(gè)組件的根元素上監(jiān)聽一個(gè)原生事件，如click、keyup等?？梢允褂?.native 修飾 v-on 。例如：

<my-component v-on:click.native="doTheThing"></my-component>    

如果不加.native修飾，父組件則會(huì)把click當(dāng)作子組件傳來的自定義事件監(jiān)聽

2.使用自定義事件的表單輸入組件

<input v-model="something">

是下面的語法糖包裝而成：

<input v-bind:value="something" v-on:input="something = $event.target.value">

所以要讓組件的 v-model 生效，它必須：

• 接受一個(gè) value 屬性
• 在有新的 value 時(shí)觸發(fā) input 事件
  一個(gè)非常簡單的貨幣輸入：

<template>
  <div>
    <currency-input v-model="price"></currency-input>
  </div>
</template>

<script type="text/javascript">
import currencyInput from './currencyInput.vue';

export default {
  data () {
    return {
      price:0
    }
  },
  components: {
    currencyInput: currencyInput

  }
}
</script>

子組件 currencyInput.vue

<template>
  <span>
    <input ref="input" v-bind:value="value" v-on:input="updateValue($event.target.value)"></span>
</template>

<script type="text/javascript">
export default {

  props: ['value'],

  methods: {

    // 不是直接更新值，而是使用此方法來對輸入值進(jìn)行格式化和位數(shù)限制
    updateValue: value => {
      var formattedValue = value
        // 刪除兩側(cè)的空格符
        .trim()
        // 保留 2 小數(shù)位
        .slice(0, value.indexOf('.') + 3)

      // 如果值不統(tǒng)一，手動(dòng)覆蓋以保持一致
      if (formattedValue !== value) {
        this.$refs.input.value = formattedValue
      }

      // 通過 input 事件發(fā)出數(shù)值
      this.$emit('input', Number(formattedValue))
    }
  }

}
</script>

摘錄自：http://www.itdecent.cn/p/7d5b92fa337e?from=timeline&isappinstalled=0