Vue3中的v-model

v-model:title的实现方式

• ParentCom.vue

<!--
 * @Description: 验证Emits 组件选项
-->
<template>
  <SonCom 
    v-model:title="bookTitle"
  ></SonCom>
</template>


<script>
import SonCom from "./SonCom .vue";

export default {
  name: "EmitsTest",
  components: { SonCom },
  data() {
    return {
      bookTitle: "非暴力沟通",
    };
  },
  watch: {
    bookTitle(val, old) {
      console.log(val, old);
    }
  },
};
</script>

• SonCom.vue

<!--
 * @FilePath: \EmitsTest\SonCom.vue
-->

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

<script>
export default {
  name: "SonCom",
  props: {
    title: String
  },

  emits: ["update:title"],
};
</script>

v-model自定义修饰符，v-model.capitalize="myText"

<template>
  <ModelCom
    v-model:title="bookTitle"
    v-model:page="page"
    v-model.capitalize="myText"
  ></ModelCom>
</template>


<script>
import ModelCom from "./ModelCom.vue";

export default {
  name: "EmitsTest",
  components: { ModelCom },
  data() {
    return {
      bookTitle: "非暴力沟通",
      page: 20,
      myText: "good",
    };
  },
  watch: {
    bookTitle(val, old) {
      console.log(val, old);
    },
    page(val, old) {
      console.log(val, old);
    },
    myText(val, old) {
      console.log(val, old);
    },
  },
};
</script>