>[success] # v-model 組件 1. 在`input`中可以使用`v-model`來完成**雙向綁定**，組件也可以使用`v-model`形式進行雙向綁定和` vue2.x` 時候只能定義一個，因此往往使用`.sync` 語法糖進行多個綁定，在`vue3.x` 開始，`v-model` 用法也升級了可以進行多個綁定，因此`.sync`語法糖也在3移除 2. 在組件使用`v-model`他的語法糖 需要定義的`props `屬性名 `modelValue` 觸發拋出的事件名`update:modelValue` ~~~ html <input v-model="searchText" /> <!--等價于：--> <input :value="searchText" @input="searchText = $event.target.value" /> ~~~ ~~~html <custom-input v-model="searchText" /> <!--等價于：--> <custom-input :model-value="searchText" @update:model-value="searchText = $event" ></custom-input> ~~~ * CustomInput 組件 定義 ~~~html <!-- CustomInput.vue --> <script> export default { props: ['modelValue'], emits: ['update:modelValue'] } </script> <template> <input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)" /> </template> ~~~ **通過案例對比看也就`value` => `model-value`,`input` => ` @update:model-value`** >[danger] ##### 在對比來看不用v-model 語法糖來寫 ~~~ 1. 案例就是常見的，父組件傳值給子組件，子組件觸發事件改變父組件值，從而達到改變子組件值 ~~~ * 父 ~~~ <template> <children-todo :model-value="name" @update:model-value="name = $event"> </children-todo> </template> <script> import childrenTodo from './components/children-todo.vue' export default { name: 'App', components: { childrenTodo, }, data() { return { name: '父組件', } }, } </script> <style></style> ~~~ * 子 ~~~ <template> <div class="content"> {{ modelValue }} <button @click="change">改變</button> </div> </template> <script> export default { props: ['modelValue'], emits: ['update:modelValue'], methods: { change() { this.$emit('update:modelValue', '1', '2') }, }, } </script> ~~~ >[danger] ##### 綁定多個v-model 1. 原來`2.x`由于 `v-model` 在一個組件只能出現一次，因此出現了使用`.sync`語法糖來彌補這個問題，現在`3.x`的`v-model `支持綁定多個因此`.sync` 也不在支持 2. 用法只要聲明`v-model` 所屬即可，`v-model:名字` 例如 組件默認的`v-model` 其實是`v-model:modelValue` 的縮寫因此在子組件接受時候`props` 為`props: ['modelValue']` ， 事件為`emits: ['update:modelValue']`,那如果綁定值定義如下`v-model:title` 則`props: ['title']` ，`emits: ['update:title']` * 父 ~~~html <template> <children-todo v-model="name" v-model:title="title"> </children-todo> </template> <script> import childrenTodo from './components/children-todo.vue' export default { name: 'App', components: { childrenTodo, }, data() { return { title: '父組件標題', name: '父組件', } }, } </script> <style></style> ~~~ * 子 ~~~html <template> <div class="content"> {{ modelValue }} {{ title }} <button @click="change">改變</button> </div> </template> <script> export default { props: ['modelValue', 'title'], emits: ['update:modelValue', 'update:title'], methods: { change() { this.$emit('update:modelValue', '1') this.$emit('update:title', 'title') }, }, } </script> <style scoped> .content { display: flex; } .left, .right { width: 80px; } .left, .right, .center { height: 44px; } .left, .right { width: 80px; background-color: red; } .center { flex: 1; background-color: blue; } </style> ~~~ >[info] ## 官方 [配合 v-model 使用](https://cn.vuejs.org/guide/components/events.html#usage-with-v-model)