vue3.x 在自定义组件上使用 v-model

咱也不知道咋回事，反正就是变了
当给组件一个 v-model=“message” 的时候
子组件 的 props 写 message 根本获取不到值，。。因为他不叫 message 叫 modelValue ，传递过去的事件 名 叫：update:modelValue

当给子组件传递多个 v-model 值的时候
v-model:别名=“data的属性”
传递过去的值 。 叫做 别名
传递过去的事件 叫做 update:别名

emmmmm 应该就是这样

<template>
  <div>
    <input type="text" v-model="message" />
    <input
      type="text"
      :value="message"
      @input="message = $event.target.value"
    />
    <h4>以上是 v-model在表单上的问题</h4>
    <br />

    <h2>{{ message }}</h2>
    <h2>title 属性：{{ title }}</h2>
    <!-- 在组件上使用 v-model -->
    <!-- 
            想要给组件传递多个 v-model 的值，可以
            v-model:起个别名="data里面的值"
            1、绑定了  :modelValue="message"
            2、绑定了 @update:model-value="message = $event"
    -->

    <!-- 
      在组件上传递多个 v-model的时候
      1、绑定的事件是   @update:son-title="message = $event" 也就是你在定义 v-model: 的时候，冒泡后面的值，就是传递过去的事件
      2、冒泡后面的值，也是 传递过去的值 
     -->
    <my-input v-model="message" v-model:son-title="title"> </my-input>
  </div>
</template>

<script>
import MyInput from "./MyInput.vue";
export default {
  props: {},
  data() {
    return {
      message: "hello world",
      title: "呆呆狗",
    };
  },
  components: { MyInput },
};
</script>

<template>
  <div>
    子组件
    <br />
    <button @click="btnClick">子组件修改父组件的值</button>
    <br />
    父组件传过来的值 ： {{ modelValue }} 父组件传过来的值 ： {{ sonTitle }}
    <br />
  </div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
    },
    // modelValue 是 v-model="message" 传过来的 message 的值
    modelValue: {
      type: String,
    },
    title: {
      type: String,
    },
    sonTitle: {
      type: String,
    },
  },
  created() {
    console.log("create的 title:", this.title);
    console.log("create的 sonTitle:", this.sonTitle);
    console.log(this.modelValue, this.message, this.sonTitle);
    // this.message 为  undefined
  },
  // update:modelValue 是 v-model="messasge" 传过来的自定义事件
  emits: ["update:modelValue", "update:sonTitle"],
  methods: {
    btnClick() {
      this.$emit("update:modelValue", "修改了父组件的message");
      this.$emit("update:sonTitle", "修改了父组件的title");
      console.log("修改后", this.sonTitle);
      console.log("修改后", this.modelValue);
    },
  },

};
</script>