## vue2中v-model的使用
> vue中v-model既可以使用在input框中，也可以使用在组件中,今天主要讨论在组件中使用
父组件代码
```
<template>
<div class="parent">
<!-- 这是子传父的写法 -->
<child-component :value="pageTitle" @input="pageTitle = $event"></child-component>
<!-- 这是v-model的简写 -->
<child-component v-model="pageTitle"></child-component>
</div>
</template>
<script>
import ChildComponent from './child-component'
export default {
name: 'Parent',
components: {
ChildComponent
},
data() {
return {
pageTitle: 'hello vue'
}
}
}
</script>
```
子组件的写法
```
<template>
<div class="child">
<input type="text" :value="value" @input="$emit('input', $event.target.value)">
</div>
</template>
<script>
export default {
name: 'Child',
props: ['value']
}
</script>
```
## vue2中.sync的使用
此时出现一个问题，如果我要传给子组件的值是多个怎么办？很显然v-model就无能为力了
1. 用法
```
父组件：
<text-document v-bind:title.sync="doc.title"></text-document>
子组件：
this.$emit('update:title', newTitle)
```
来我们看看上面的v-model如果改造成.sync
父组件
```
<template>
<div class="parent">
我是父组件
<child-component :value.sync="pageTitle" :main.sync="pageMain"></child-component>
</div>
</template>
<script>
import ChildComponent from './child-sync'
export default {
name: 'Parent',
components: {
ChildComponent
},
data() {
return {
pageTitle: 'hello vue',
pageMain: 'hello sync'
}
}
}
</script>
```
子组件
```
<template>
<div class="child">
<input type="text" :value="value" @input="$emit('update:value', $event.target.value)">
<input type="text" :value="main" @input="$emit('update:main', $event.target.value)">
</div>
</template>
<script>
export default {
name: 'Child',
props: ['value', 'main']
}
</script>
```
## vue3中v-model的使用
父组件
```
<template>
<child-component v-model:title="pageTitle" v-model:main="pageMain"></child-component>
</template>
<script>
import ChildComponent from './child-components.vue'
export default {
name: 'Parent',
components: {
ChildComponent
},
data() {
return {
pageTitle: 'hello vue',
pageMain: 'hello sync'
}
}
}
</script>
```
子组件
```
<template>
<div class="child">
<input type="text" :value="title" @input="$emit('update:title', $event.target.value)">
<input type="text" :value="main" @input="$emit('update:main', $event.target.value)">
</div>
</template>
<script>
export default {
name: 'Child',
props: ['title', 'main']
}
</script>
```
## vue2 vs vue3
相同点：
1. 在父组件中v-model是同样的使用手法
不同点：
1. 子组件中vue2是`$emit('input', value)` vue3中 `$emit('update:value', value)`
2. vue2中的.sync`:value.sync="pageTitle"` 在vue3中全部用v-model替换`v-model:value="pageTitle"`
|
|
收藏
淘帖
踩
