含大写的 prop 名会自动转为 kabab-case；事件名必须完全匹配监听这个事件所用的名称，@xxx和$emit('xxx')中xxx必须一样。
<div id="app">
<f-input v-model="value"></f-input>
<!-- kebab-case -->
<f-input :my-prop="value" @my-input="value = $event"></f-input>
{{value}}
</div>
Vue.component('f-input', {
template: `<div>
<input
:value="myProp"
@input="$emit('my-input', $event.target.value)">
</input> <!-- kebab-case -->
</div>`,
props: {
myProp: String // prop名可以camelCase
// 'my-prop': String // kebab-case效果一样
},
model: {
prop: 'my-prop', // kebab-case
// prop: 'myProp', // camelCase效果一样
event: 'my-input' // 必须kebab-case
}
})
let app = new Vue({
data() {
return {
value: ''
}
}
}).$mount('#app')
