在组件上使用v-model
原理
1.语法糖:使用v-model进行数据双向绑定<input v-model="searchText">
等价于<input :value="searchText" @input="searchText = $event.target.value" >
2.在组件上使用
父组件
<custom-input v-model="searchText"></custom-input>
等价于
<custom-input :value="searchText" @input="searchText = $event" ></custom-input>
复制代码
子组件
<template>
<div>
<input :value="value" @input="$emit('input', $event.target.value)" >
</div>
</template>
复制代码
写法一:子组件使用model(主要的写法)
父组件
<demo v-model="query"></demo>
复制代码
子组件
<template>
<div>
<span>{{value}}</span>
<button @click="handle">点击</button>
</div>
</template>
<script>
export default {
model: {
prop: 'value',
event: 'change'
},
props: {
value: ''
},
methods: {
handle() {
this.$emit('change', this.value+2)
}
}
}
</script>
复制代码
写法二:子组件使用通过监听value和暴露input事件来实现v-model
父组件
<demo v-model="query"></demo>
复制代码
子组件
<template>
<div>
<span>{{value}}</span>
<button @click="handle">点击</button>
</div>
</template>
<script>
export default {
props: {
value: '' //这里必须使用value
},
methods: {
handle() {
this.$emit("input", this.value + 2);//这里必须使用input方法传数据
}
}
};
</script>
复制代码
写法三:使用sync
父组件
<demo :value.sync="query" ></demo>
复制代码
子组件
<template>
<div>
<span>{{value}}</span>
<button @click="handle">点击</button>
</div>
</template>
<script>
export default {
props: {
value:''
},
methods: {
handle() {
this.$emit('update:value', this.value + 2);
}
}
};
</script>
复制代码