关键词：emit
我们知道，父组件是使用 props 传递数据给子组件，但如果子组件要把数据传递回去，应该怎样做？那就是自定义事件！
每个 Vue 实例都实现了事件接口(Events interface)，即：
- 使用 $on(eventName) 监听事件
- 使用 $emit(eventName)触发事件
Vue.component('button-counter', {
template: `
<button v-on:click="increment">{{ counter }}</button>`,
data() {
return {
counter: 0
}
},
methods: {
increment: function () {
this.counter += 1
this.$emit('increment')
}
},
});
new Vue({
el: '#example',
data: {
total: 0
},
methods: {
incrementTotal: function () {
this.total += 1
}
}
})
<div id="example">
<p>{{ total }}</p>
<button-counter v-on:increment="incrementTotal"></button-counter>
<button-counter v-on:increment="incrementTotal"></button-counter>
</div>
通过以上代码发现，就是子组件自定义了个事件，然后把这个事件发射出去，父组件应用这个事件，就实现了
官网还提供了另一个有意思的例子
Vue.component('currency-input', {
template: `
<span>
$
<input
ref="input"
v-bind:value="value"
v-on:input="updateValue($event.target.value)"
>
</span>
`,
props: ['value'],
methods: {
updateValue: function (value) {
var formattedValue = value
// 删除两侧的空格符
.trim()
// 保留 2 小数位
.slice(0, value.indexOf('.') + 3)
// 如果值不统一，手动覆盖以保持一致
if (formattedValue !== value) {
this.$refs.input.value = formattedValue
}
this.$emit('input', Number(formattedValue))
}
}
})
new Vue({
el: '#example',
data: {
price:''
}
})
<div id="example">
<currency-input v-model="price"></currency-input>
</div>
注意这里的v-moel是个语法糖
<input v-model="something">
应为
<input v-bind:value="something" v-on:input="something = $event.target.value">
