vue2中v-model .sync 和 vue3中v-model的使用

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是同样的使用手法 不同点：
2. 子组件中vue2是$emit('input', value) vue3中 $emit('update:value', value)
3. vue2中的.sync:value.sync="pageTitle" 在vue3中全部用v-model替换v-model:value="pageTitle"