真正搞懂v-model 和 .sync的区别

vue2

v-model

v-model实现父子组件值得双向绑定。默认的props为value，事件为input事件。

但是我们可以通过在子组件中通过mode来改变props和监听的事件。

例如：

 //父组件
<baseInput v-model="content"></baseInput>

//子组件
<template>
    <div>
      <input type="text" :value="value"  @input="$emit('input',$event.target.value)">
    </div>
</template>
<script>
export default {
    props:{
      value:{
        type:String
      }
    }
}
</script>


复制

监听其他事件：

 //父组件
<baseInput v-model="check"></baseInput>


//子组件
<template>
    <div>
      <input
      type="checkbox"
      :checked="checked"
      @change="$emit('change', $event.target.checked)"
    >
    </div>
</template>
<script>
export default {
    model:{
      prop:'checked',
      event:'change'
    },
    props:{
      checked:{
        type:Boolean
      }
    }
}
</script>复制

.sync

在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以变更父组件，且在父组件和子组件两侧都没有明显的变更来源。这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：(来自vue2官网)

案例：一个父组件可以使用多个.sync

 //父组件
<baseInput :title.sync="content" :name.sync="name"></baseInput>


//子组件
<template>
    <div>
      <input
        :value="title"
        @change="$emit('update:title', $event.target.value)"
      >
     <input
        :value="name"
        @change="$emit('update:name', $event.target.value)"
      >
    </div>
</template>
<script>
export default {
    props:{
      title:{
        type:String
      },
      name:{
        type:String
      }
    }
}
</script>复制

真正搞懂v-model 和 .sync的区别

vue3中v-model的使用

vue3中v-model在组件上使用默认传递的modelValue，抛出update:modelValue事件改变父组件中的值。

我们还可以通过指定prop名来绑定多个prop。

//父组件
<template>
  <Base v-model="title"></Base>
</template>
<script setup>
import {ref} from 'vue'
import Base from './components/base.vue'
const title= ref('')
</script>


//子组件
<template>
    <div>
      <input type="text" :value="modelValue" @input="$emit('update:modelValue',$event.target.value)">
    </div>
</template>
<script setup>
import { defineProps,defineEmits } from 'vue';
const props = defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>复制

自定义prop名字,并且传递多个props

//父组件
<template>
  <Base v-model:title="title" v-model:content="content"></Base>
</template>
<script setup>
import {ref} from 'vue'
import Base from './components/base.vue'
const title= ref('')
const content = ref('')
</script>

//子组件
<template>
    <div>
      <input type="text" 
       :value="title"
       @input="$emit('update:title',$event.target.value)"
       >
       <input type="text"
        :value="content"
        @input="$emit('update:content',$event.target.value)"
       >
    </div>
</template>
<script setup>
import { defineProps,defineEmits } from 'vue';
const props = defineProps(['title','content'])
defineEmits(['update:title','update:content'])
</script>复制

更多好文移步龙仔的个人博客(longzai1024.top/home )，谢谢关注！