1. model选项:
v-model在普通dom的表单标签上使用可以实现双向绑定,但在自定义组件标签中就不行,其要实现双向绑定需要model选项来实现
理解这个属性,可以很好的理解v-model的绑定原理,可以对照v-model的使用来浏览本文
1.1. <input>文本框
刚开始加载时,<span>标签取的{{name}}是vue实例的属性值,所以会显示bbb
而渲染子组件时,子组件绑定的value是子组件中data的value,所以会显示aaa
输入时,输入的值是value(对应子组件data的value属性),输入后触发绑定的input事件
·
通过$emit,调用名为input-value的事件的回调函数,其中输入的value(即$event.target.value)作为参数传递
那会执行声明回调函数呢?这个就得关注model选项
·
这个model选项,当指定的event触发时,会修改prop的绑定属性值为传递的参数值
prop的绑定属性值改变了,vue实例对应属性值也会改变
$emit(‘input-value’,$event.targe.value)的调用结果就是,把vue实例属性name修改为input输入的值
·
关于$.emit的使用可以查看vue的全局api
<div id="test-modelComponent-input">
<span>name: {{name}}</span><br/>
<input-text v-model="name" placeholde="edit me"></input-text>
</div>
<script>
Vue.component('input-text', {
model: {
prop: 'name',
event: 'input-value'
},
data: function () {
return {
value: 'aaa'
}
},
// 和上述data一样,主要定义子组件value属性,因为v-bind:value="value"需要绑定
// props: {value: String},
template: `<input type="text" v-bind:value="value" v-on:input="$emit('input-value',$event.target.value)"/>`
});
new Vue({
el: '#test-modelComponent-input',
data: {
name: 'bbb'
}
});
</script>
普通dom标签的v-model,相当于在内部使用 prop: ‘value’ 和event: ‘input’ ,输入值触发input事件,改变value值
1.2. <textarea>多行文本框:
和自定义组件中<inpu>文本框使用类似
<div id="test-modelComponent-textarea">
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p><br/>
<input-textarea v-model="message" placeholde="edit me"></input-textarea>
</div>
<script>
Vue.component('input-textarea', {
model: {
prop: 'message',
event: 'input-value'
},
data: function () {
return {
value: ''
}
},
// props: {value: String},
template: `<textarea type="text" v-bind:value="value" v-on:input="$emit('input-value',$event.target.value)"/>`
});
new Vue({
el: '#test-modelComponent-textarea',
data: {
message: ''
}
});
</script>
1.3. <input>复选框:
这个和自定义组件中<inpu>文本框使用类似,区别在于绑定checked属性和change事件以及传递的参数是$event.target.checked
<div id="test-modelComponent-checkbox">
<input-checkbox v-model="checked"></input-checkbox>
<span>{{checked}}</span><br/>
</div>
<script>
Vue.component('input-checkbox', {
model: {
prop: 'checked',
event: 'change-value'
},
props: {
checkedValue: Boolean
},
template: `<input type="checkbox" v-bind:checked="checkedValue" v-on:change="$emit('change-value',$event.target.checked)"/>`
});
new Vue({
el: '#test-modelComponent-checkbox',
data: {
checked: false
}
});
</script>
v-model内部定义的属性和事件
先这样吧,虽然自定义组件使用多个复选框、单选框这些没整出来,到时候再补充吧… …