这里以input做示例：
父组件代码：
<template>
<div>
<inputDIY v-model="inputSearch"></inputDIY>
</div>
</template>
<script>
import inputDIY from './input.vue'
export default {
data() {
return {
inputSearch:''
}
},
components:{
inputDIY
}
}
</script>
<style lang="scss" scoped>
</style>
子组件代码:
<template>
<div>
<input type="text" :value="nativeInputValue" @input="inputChange">
</div>
</template>
<script>
export default {
computed: {
nativeInputValue(){
return this.value === null || this.value === undefined ? '' : this.value
}
},
props:{
value: [String, Number]
},
methods: {
inputChange(event){
this.$emit('input', event.target.value)
}
}
}
</script>
<style lang="scss" scoped>
</style>
这里做一下总结：我们从父组件通过v-model双向绑定值到子组件（inputDIY）中，那我们为什么不直接在子组件v-model双向绑定父组件传输过来的值呢？这是因为所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。总之就是子组件不能直接修改父组件中的值，但是可以通过自定义事件告诉父组件，这个值是否要进行更新，这里使用computed计算属性就可以变向的实现子组件与父组件之间的双向数据流
