v-model

新的语法糖

<MyComp v-model="model" v-model:title="title" />

// 默认
const model = defineModel()

// 命名或多个
const title = defineModel('title')

旧版本实现

const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

vue2 的写法

默认且唯一，有且只能有一个 v-model

App

<MyComp v-model="model" />

Comp

export default {
  props: ['value'],
  emits: ['input']
}

vue2 的另类实现

App

<MyComp :name.sync="name" />

Comp

export default {
  props: ['name'],
  emits: ['update:name'],
  methods: {
    changeParent() {
      this.$emit('update:name', newName)
    }
  }
}