v-model和.sync的区别

141 阅读1分钟

v-model

父组件中
<!-- v-model -->
<!-- v-model在组件中只能使用一次 -->
<!-- 解析如下 -->
<!-- :value='visible' -->
<!-- @input='visible=$event' -->

子组件中

<p @click="$emit('input',flase)" />
...
props: {
    value: {
      type: Boolean,
      default: true
    }
  }

sync

<!-- sync -->
<!-- sync在组件中可以使用多次 -->
<!-- 解析如下 -->
<!-- :color='color' -->
<!-- @update:color='color=$event' -->

子组件中

    <p @click="$emit('update:visible',flase)" />
    ...
    props: {
    visible: {
      type: Boolean,
      default: true
    }
  },