vue3中消失的.sync去哪了呢?原来变成v-model了!!!

在vue2.x中,子传父是这样的

父组件

• 父组件监听自定义事件update:title

<template>
  <div class='Father'>
    这个是父组件
    {
    
    {
    
    count}}
    <Son :title="count" @update:title="(e)=>count=e"/>
 </div>
</template>

子组件

子组件发射自定义事件update:title

  <div class='Son'>
    <h1 @click="this.$emit('update:title', 99999)">这个是子组件 </h1>
 </div>

在后面的版本中,yyx直接将这种方式优化成了.syne

父组件

<template>
  <div class='Father'>
    这个是父组件
    {
    
    {
    
    count}}
    //<Son :title="count" @update:title="(e)=>count=e"/>
    <Son :title.sync="count"/>
 </div>
</template>

这不就是双向绑定吗

因此,在vue3中,.sync被取消了,取代他的是v-model

• 子组件发射自定义事件的方式不变
• 翻译成人话就是: 组件中的value等于自定义事件的$event,就是v-model的原理

<template>
  <div class="Father">
    这个是父组件
    {
    
    {
    
     count }}
    <Son v-model:title="count" />
  </div>
</template>

点击