Vue3.0 自定义v-model:xxx

父组件

<ChildComponent v-model:title="pageTitle" />

子组件

export default {
  props: {
    title: String
  },
  emits: ['update:title'],
  methods: {
    changePageTitle(title) {
      this.$emit('update:title', titleChild)
    }
  }
}

可以看到父组件v-model后面的title在子组件的props、emits和$emit里面需要保持一致。
其实这些官网都有，下面重点讲一下setup中的。
父组件

<ChildComponent v-model:title="pageTitle" />

子组件

export default {
  props: {
    title: String
  },
  emits: ['update:title'],
  setup(){
  const titleChild = ref<string>('')
  emit('update:title',titleChild)
  return {
  		titleChild
  	}
  }
}

这种情况只触发了一次update:title，但是你会发现你titleChild在子组件改变，父组件也会发生改变。
父组件

<ChildComponent v-model:title="pageTitle" />

子组件

export default {
  props: {
    title: String
  },
  emits: ['update:title'],
  setup(){
  const titleChild = ref<string>('')
  updateTitle = ()=>{
		emit('update:title',titleChild.value)
	}
  return {
  		titleChild
  	}
  }
}

这里是触发一次updateTitle，会传递一次值给父组件。如果emit('update:title',titleChild.value)改为emit('update:title',titleChild)，只要触发一次updateTitle，后面titleChild改变父组件就会同步改变。
造成这种情况的原因是因为ref(’’)的proxy对象。