摘要：
假设有这样一个文件组件：CustomerInput.vue，其内容如下：exportdefault｛name:'CustomerInput'，mod
假设有这样一个单文件组件：CustomerInput.vue，其内容如下：
<template>
<div>
<input v-bind:value="value" v-on:input=$emit('input', $event.target.value)""></input>
</div>
</template>
<script>
export default {
name: 'customer-input',
model: {
prop: 'value',
event: 'input'
},
props: {
value: {
type: String,
default: ''
}
}
}
</script>
<style scoped>
. customer-input__inner {
background-color: #fff;
background-image: none;
border-radius: 4px;
border: 1px solid #dcdfe6;
box-sizing: border-box;
color: #606266;
display: inline-block;
font-size: inherit;
height: 32px;
line-height: 32px;
padding: 0 15px;
transition: border-color .2s cubic-bezier(.645,.045,.355,1);
100%;
}
</style>那么在其它单文件组件中使用该组件时，可以这样使用：
<template>
<div>
<customer-input v-model="value" />
</div>
</template>
<script>
import CustomerInput from 'CustomerInput.vue' // 或者 import CustomerInput from 'CustomerInput'
export default{
// 第一种写法
components: {
CustomerInput
}
// 第二种写法
//components: {
// 'customer-input': CustomerInput
//}
data() {
return {
value: ''
}
}
}
</script>
<style>
</style>这样就实现了简单的双向绑定了。