這里以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）中澳淑，那我們?yōu)槭裁床恢苯釉谧咏M件v-model雙向綁定父組件傳輸過來的值呢？這是因為所有的 prop 都使得其父子 prop 之間形成了一個單向下行綁定：父級 prop 的更新會向下流動到子組件中仲义，但是反過來則不行婶熬。這樣會防止從子組件意外改變父級組件的狀態(tài)剑勾，從而導致你的應用的數據流向難以理解≌月總之就是子組件不能直接修改父組件中的值虽另，但是可以通過自定義事件告訴父組件，這個值是否要進行更新性含，這里使用computed計算屬性就可以變向的實現子組件與父組件之間的雙向數據流
