<template>
<div>
<!-- 1. 绑定 value
2. 响应 input 事件
-->
<input type="text" :value="valueInInput" @input="handleInput">
</div>
</template><script>
export default {
name: "EInput",
props: {
value: { // 解释一
type: String,
default: '',
}
},
data() {
return {
valueInInput: this.value // 解释二
};
},
methods: {
handleInput(event) {
this.valueInInput = event.target.value; // 解释三
this.$emit('input', this.valueInInput); // 解释四
}
},
};
</script>
我们对上面的代码做一点解释：
**解释一：**既然我们想做一个
Input 组件，那么接收的值必然是父组件传进来的，并且当父组件没有传进来值的时候，我们可以它一个默认值
"" 。**解释二：**我们在设计组件的时候，要遵循单向数据流的原则：父组件传进来的值，我们只能用，不能改。那么将父组件传进来的值进行一个赋值操作，赋值给
Input 组件内部的
valueInInput ，如果这个值发生变动，我们就修改内部的值
valueInInput 。这样我们既可以处理数据的变动，又不会直接修改父组件传进来的值。**解释三：**当
Input 中的值发生变动时，触发
@input 事件，此时我们通过
event.target.value 获取到变化后的值，将它重新赋值给内部的
valueInInput 。**解释四：**完成了内部赋值之后，我们需要做的就是将变化后的值通知父组件，这里我们用
this.$emit 向上派发事件。其中第一个参数为事件名，第二个参数为变化的值。完成了以上四步，一个实现了双向数据绑定的简单的
Input 组件就设计完成了。此时我们可以在 App.vue 中引入
Input 组件观察一下结果。
<template>
<div id="app">
<e-input v-model="initValue"></e-input>
<div>{{ initValue }}</div>
</div>
</template><script>
import EInput from './components/Input.vue';
export default {
name: "app",
components: {
EInput
},
data() {
return {
