behance设计网_个人网站建设好之后怎么赚钱_河南网站seo靠谱_企业营销策划论文

v-model 原理 

 App.vue

//App.vue<template><div class="app"><input v-model="msg1" type="text" /><!-- 模板中获取事件的形参 → $event 获取 --><br /><input :value="msg2" @input="msg2=$event.target.value" type="text" ></div>
</template><script>
export default {data() {return {msg1: '',msg2:''}},
}
</script><style>
</style>

表单组件封装$v-model简化代码 

表单类组件封装 

App.vue 

<template><div class="app"><BaseSelect :cityId="selectId" @changeid="selectId =$event "></BaseSelect></div>
</template><script>
import BaseSelect from './components/BaseSelect.vue'
export default {data() {return {selectId: '102',}},components: {BaseSelect,},methods: {handleChange(e) {console.log(e);this.selectId = e}}
}
</script><style>
</style>

 BaseSelect.vue

<template><div><select :value="cityId" @change="changeId"><option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">广州</option><option value="105">深圳</option></select></div>
</template><script>
export default {props:{cityId:String},methods:{changeId(e){this.$emit('changeid',e.target.value)}}
}
</script><style>
</style>

 

父组件v-model简化代码

App.vue 

<template><div class="app"><!-- v-model => :value + @input --><BaseSelect v-model="selectId"></BaseSelect></div>
</template><script>
import BaseSelect from './components/BaseSelect.vue'
export default {data() {return {selectId: '102',}},components: {BaseSelect,},methods: {handleChange(e) {console.log(e);this.selectId = e}}
}
</script><style>
</style>

 BaseSelect.vue

<template><div><select :value="value" @change="changeId"> //固定传值 value<option value="101">北京</option><option value="102">上海</option><option value="103">武汉</option><option value="104">广州</option><option value="105">深圳</option></select></div>
</template><script>
export default {props:{value:String},methods:{changeId(e){this.$emit('input',e.target.value) //固定 input}}
}
</script><style>
</style>

 总结