1.在原生标签中使用
v-model双向绑定原理
- v-bind绑定一个value属性
- v-on指令给当前元素绑定input事件
<input type="text" v-model="username" />
-----------------------
等价于
-----------------------
<input type="text" :value="username" @input="username = $event.target.value" />
2. 在自定义组件标签上使用
父组件：
<custom-input
v-model="searchText"
></custom-input>
-----------------------
等价于
-----------------------
<custom-input
v-bind:value="searchText"
v-on:input="searchText = $event"
></custom-input>
子组件：
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
3.中间遇到的问题：
（子组件中修改props值报错）Unexpected mutation of "value" prop vue/no-mutating-props
- 场景1：prop仅仅传递一个初始值：
子组件中重新定义一个变量，将prop传递的值作为新变量的初始值
export default {
props: ['value'],
data () {
return {
childValue: this.value
}
},
- 场景2：prop传递一个原始值，需要在子组件中处理：
定义一个计算属性去处理
export default {
props: ['value'],
computed: {
changeValue: {
get () {
return this.value.trim()
}
}
}
