2017-8-21
1. 给组件绑定原生事件
有时候，你可能想在某个组件的根元素上监听一个原生事件，如click、keyup等。可以使用 .native 修饰 v-on 。例如：
<my-component v-on:click.native="doTheThing"></my-component>
如果不加.native修饰，父组件则会把click当作子组件传来的自定义事件监听
2.使用自定义事件的表单输入组件
<input v-model="something">
是下面的语法糖包装而成：
<input v-bind:value="something" v-on:input="something = $event.target.value">
所以要让组件的 v-model 生效，它必须：
- 接受一个 value 属性
- 在有新的 value 时触发 input 事件
一个非常简单的货币输入：
<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: {
// 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
updateValue: value => {
var formattedValue = value
// 删除两侧的空格符
.trim()
// 保留 2 小数位
.slice(0, value.indexOf('.') + 3)
// 如果值不统一，手动覆盖以保持一致
if (formattedValue !== value) {
this.$refs.input.value = formattedValue
}
// 通过 input 事件发出数值
this.$emit('input', Number(formattedValue))
}
}
}
</script>
摘录自：http://www.jianshu.com/p/7d5b92fa337e?from=timeline&isappinstalled=0
