vue3中实现v-model:title

在Vue3中，可以使用v-model的语法糖来实现双向绑定。若要绑定的属性为title，则可借助v-model:title即可实现双向绑定。
例如：

<template>
  <input v-model:title="message" />
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'MyComponent',
  setup() {
    const message = ref('');

    return {
      message,
    };
  }
});
</script>

在上述示例中，我们通过v-model:title将表单中输入框的值(message)与组件中的title属性双向绑定。如果在父组件中调用该组件，可以直接使用v-model绑定message属性，例如：

<template>
  <div>
    <my-component v-model="message"></my-component>
    <p>{{ message }}</p>
  </div>
</template>

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

export default {
  components: {
    MyComponent,
  },
  data() {
    return {
      message: '',
    };
  }
};
</script>

这里的message属性即可自动与MyComponent组件中的message属性进行双向绑定。