Vue3父子组件使用 v-model 通信

• 默认情况下的v-model其实是绑定了 modelValue 属性和 @update:modelValue的事件；(案例一)
• 如果我们希望绑定更多(或者说绑定自己的名字)，可以给v-model传入一个参数，那么这个参数的名称就是我们绑定属性的名称；(案例二)

案例一

父组件

<template>
  <div class='demo'>
    input_val---{{input_val}}
    <myButton v-model="input_val" :placeholder="placeholder" />
  </div>
</template>

<script lang='ts'>
import { reactive, toRefs, defineComponent } from 'vue';

import myButton from "@/components/wxjButton/index.vue"
export default defineComponent({
name:'demo',
components: {
    myButton
 },
setup(props) {
const state=reactive({
    placeholder:"默认输入",
    input_val:""
})
return {
...toRefs(state)
}
}
})
</script>

<style lang='scss' scoped>

</style>

子组件

<template>
  <div>
    <!-- 第三步 这儿也可以直接使用 v-model -->
    <input :value="val" @input="onInput" /> 
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
export default defineComponent({
  props: {
    modelValue: { // 第一步
      type: String,
      default: "",
    },
  },

  setup(props, context) {
    const state = reactive({
      val: props.modelValue || "",  // 第二步
    });


    const onInput = (e: Event) => {
    // 如果使用 v-model 这儿可以不再同步value
      const targetValue = (e.target as HTMLInputElement).value;
      state.val = targetValue;
      // 第四步
      context.emit("update:modelValue", targetValue);
    };
    return { ...toRefs(state), onInput };
  },
});
</script>

案例二

父组件

<my-component v-model:title="bookTitle"></my-component>

子组件

app.component('my-component', {
  props: {
    title: String
  },
  emits: ['update:title'],
  template: `
    <input
      type="text"
      :value="title"
      @input="$emit('update:title', $event.target.value)">
  `
})