v-model
- v-model 其实是个语法糖
<input v-model="sth" />
<!- - 等价于 -->
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />
- 举个简单的例子：
html:
<div id="app">
<my-component v-model="content"></my-component>
<p>{{ content }}</p>
</div>
javascript:
Vue.component('my-component',{
template: '<div><p>{{value}}</p><button @click="handle">点击更换枪械</button> </div>',
props:['value'],
methods:{
handle: function(){
this.$emit('input','qbz95');
}
}
})
new Vue({
el: '#app',
data: {
content: 'ak47'
}
})
进一步理解
v-model等价的v-bind绑定的属性名和v-on绑定的事件名是可以自定义的。
自定义时需要使用组件的model选项
model { prop：组件绑定的属性名，event：组件抛出的事件 }
现在将上面的例子改一下：
Vue.component('my-component', {
template: '<div><p>{{myValue}}</p><button @click="handle">点击更换枪械</button></div>',
model: {
prop: 'myValue',
event: 'myMethod'
},
props: ['myValue'],
methods: {
handle: function() {
this.$emit('myMethod', 'qbz95');
}
}
})
- 运行之后发现跟原来的效果一样。
深入理解
- 之前子组件中用的是button按钮，接下来用input输入框来写：
Vue.component('my-component', {
template: `<div>更换枪械:
<input type="text" @input="handle($event.target.value)"
:value="myValue"></div>`,
model: {
prop: 'myValue', // 对应子组件中的value值
event: 'myMethod' // 对应传给父组件的事件名
},
props: { myValue:String },
methods: {
handle: function(value) {
this.$emit('myMethod', value);
}
}
})
let vm = new Vue({
el: '#app',
data: {
content: 'ak47'
}
})
- 附：
text和textarea元素使用value属性和input事件
checkbox和radio使用checked属性和change事件
select使用value和change事件
[注:] 初学Vue，学术不精，如有错误，恳请指出！
