20250409-v-model的参数

组件上的 v-model 也可以接受一个参数：

<MyComponent v-model:title="bookTitle" />

在这种情况下，子组件应该使用 title prop 和 update:title 事件来更新父组件的值，而非默认的 modelValue prop 和 update:modelValue 事件。

子组件代码：

<script>
export default {
  props: ['title'],
  emits: ['update:title'],
}
</script>

<template>
  <input type="text"
  :value="title"
  @input="$emit('update:title',$event.target.value)"
  />
</template>

父组件代码：

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: { MyComponent },
  data() {
    return {
      title: 'v-model argument example'
    }
  }
}
</script>

<template>
	<h1>{{ title }}</h1>
	<MyComponent v-model:title="title"/>
</template>

子组件改成另一种实现 v-model 的形式：

<script>
export default {
  props: ['title'],
  emits: ['update:title'],
  computed:{
	  title:{
		  get(){
			  return this.title
		  },
		  set(value){
			  this.$emit('update:title',value)
		  }
	  }
  }
}
</script>

<template>
  <input type="text" v-model="title"
  />
</template>