When using iview frame assembly often see way binding with v-model data, props traditional values subassembly, the subassembly is modified EMIT transmitted $ compared with the conventional value by step parent component, in this way avoiding operation sub re-assembly operations at the same time the parent component, subassembly package effect appears better. So, personally think that we should also have their own packaging components such thinking, the parent component or props pass through the slot value, the effect of the completion of some sub-components, and then thrown out the necessary events let the parent component to accept, so that the component reusability on very conducive to multiple use.
What instruction is a v-model?
Just mentioned, iview by v-model two-way data binding, so we need to understand what has been done v-model in the process. There vue-based students should know, v-model is essentially a syntactic sugar, integrated v-bind and v-on's. Form elements such as input, v-bind a binding value, the value data to put the data, then simultaneously monitor an input event by v-on, when the change of the form data, the data will be the data value is passed, as follows
<input type='text' v-model='msg'>
// 相当于
<input type='text' :value=msg @input='msg =$event.target.value'>vue2.2 new model API
Although new, in fact vue3.0 have been released, which is actually considered a relatively old features, the official website is written so
允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。This sentence is longer, we come to understand, step by step, beginning with the first sentence
- Custom assembly allows a custom event and prop when using v-model
In general, v-modeltwo-way data binding on the form element, the custom data binding component typically pass through the parent-child value component
- By default, one component
v-modelwill prop and the value used as input event
Front said, v-modelis v-bindand v-onsyntactic sugar, so here v-modelit is two steps
For a chestnut
such as
// 父组件
<Child v-model='iptValue'></Child>
// 子组件
Vue.components('Child',{
model: {
prop: ipt,
evnet: change
}
props: {
ipt: Number
}
template: `<input type='number' :value='ipt' @change='$emit("change",parseInt($event.target.value))'>`
})Here v-model corresponding to parent components
<Child :value='iptValue' @change='value => iptValue = value'></Child>Words explain the above code
Said earlier, his son components pass through a value prop and $ emit, the first step in the iptValue parent component sub-assemblies passed through the prop, but pay attention, here's my take subcomponents to prop up an alias named iptas a distinguished, so the child prop object components in the key for me to take an alias ipt. The second step, when the input value changes of sub-assemblies, subassemblies monitor a onchange method, pay attention to me here to $ emit events took an alias, but the alias and the original name of the same change, input values change emit submit change event and the new values to the parent component, but they have to note that the load is $ emit a string ....
Then just as the above code
Parent component execution value => iptValue = valuestatement, thus completing the two-way data binding component of father and son
Personally I feel that v-modelwith the greatest benefit from custom components to improve the encapsulation, the parent component assembly unnecessary to write another accepted a subcomponent sent to the $ emit method
- Finally, third sentence,
但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的
In fact, this is easy to understand, because valuethe string is meaningful input, alias favor of distinction, it is not important in this small part of the ...
End
It is more personal for custom components v-modelthat experience, article or have any questions please also indicate the wrong place, thanks for reading