Vue 的组件系统允许创建具有完全自定义行为且可服用的输入组件,这些输入组件可以和v-model一起使用。
官方文档
<input v-model="searchText">
等价于:
<input
v-bind:value="searchText"
v-on:input="searchText = $event.target.value"
>
当用在组件上时,v-model 则会是这样:
<custom-input
v-bind:value="searchText"
v-on:input="searchText = $event"
></custom-input>
为了让它正常工作,这个组件内的 <input>
必须:
- 将其
value
特性绑定到一个名叫value
的 prop 上 - 在其
input
事件被触发时,将新的值通过自定义的input
事件抛出
写成代码之后是这样的:
Vue.component('custom-input', {
props: ['value'],
template: `
<input
v-bind:value="value"
v-on:input="$emit('input', $event.target.value)"
>
`
})
看起来似乎不太好理解,我们换一种写法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 双向绑定 searchText -->
<p>msg:{{searchText}}</p>
<!-- 向子组件custom-input中传入一个value值 @input用来响应子组件的emit事件-->
<custom-input
v-bind:value="searchText"
@input="searchText = $event">
</custom-input>
</div>
<script src="js/vue.js"></script>
<script>
Vue.component('custom-input', {
// 子组件通过props接收value值 然后绑定至input的value上
props: ['value'],
template: `<input :value="value" @input="handleInput">`,
methods: {
// input输入框的input事件
handleInput(event) {
var value = event.target.value;
this.$emit('input', value) // 通过emit事件讲输入框的值上传至父组件
}
}
})
var app = new Vue({
el: '#app',
data: {
searchText: ''
}
})
</script>
</body>
</html>
然后将<custom-input ></custom-input>改写:
<custom-input v-model="searchText"></custom-input>