Vue3 组件 v-model 高级用法

// App.vue

<template>

  <div>

    <!-- <input v-model="message">-->

    <!-- 元素上使用 v-model 相当于做了两件事情：属性和事件

    <input :value="message" @input="message = $event.target.value" /> -->

    <neko-input v-model="message"></neko-input>

    <!-- 组件上使用 v-model，相当于做了两件事情：属性和事件

    <hy-input

      :modelValue="message"   // 绑定数据属性

      @update:model-value="message = $event">  // 绑定事件  $event 就是值

    </hy-input> -->

    <!-- 绑定两个 v-model -->

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

    <h2>{{ message }}</h2>

  </div>

</template>

<script>

import NekoInput from "./NekoInput.vue";

export default {

  components: {

    NekoInput,

  },

  data() {

    return {

      message: "Hello World",

    };

  },

};

</script>

<style scoped></style>

// NekoInput.vue

<template>

  <div>

    <input type="text" :value="modelValue" @input="listeningIpt($event)" />

  </div>

</template>

<script>

export default {

  // 要渲染在页面上，须在 props 中定义接收 App 组件传递过来的 message

  props: {

    modelValue: String,

  },

  emits: ["update:modelValue"], // 监听默认绑定的事件

  methods: {

    listeningIpt(e) {

      // 发送事件，传递数据

      this.$emit("update:modelValue", e.target.value);

    },

  },

};

</script>

<style scoped></style>

// App.vue

<template>

  <div>

    <!-- <input v-model="message">-->

    <!-- 元素上使用 v-model 相当于做了两件事情：属性和事件

    <input :value="message" @input="message = $event.target.value" /> -->

    <neko-input v-model="message"></neko-input>

    <!-- 组件上使用 v-model，相当于做了两件事情：属性和事件

    <hy-input

      :modelValue="message"   // 绑定数据属性

      @update:model-value="message = $event">  // 绑定事件  $event 就是值

    </hy-input> -->

    <!-- 绑定两个 v-model -->

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

    <h2>{{ message }}</h2>

  </div>

</template>

<script>

import NekoInput from "./NekoInput.vue";

export default {

  components: {

    NekoInput,

  },

  data() {

    return {

      message: "Hello World",

    };

  },

};

</script>

<style scoped></style>

// NekoInput.vue

<template>

  <div>

    <!-- <input type="text" :value="modelValue" @input="listeningIpt($event)" /> -->

    <!-- 使用 v-model 进行双向绑定 -->

    <input v-model="iptValue" />

  </div>

</template>

<script>

export default {

  // 要渲染在页面上，须在 props 中定义接收 App 组件传递过来的 message

  props: {

    modelValue: String,

  },

  emits: ["update:modelValue"], // 监听默认绑定的事件

  computed: {

    iptValue: {

      set(value) {

        // 发送事件，传递数据

        this.$emit("update:modelValue", value);

      },

      get() {

        return this.modelValue;

      },

    },

  },

};

</script>

<style scoped></style>

// App.vue

<template>

  <div>

    <!-- <input v-model="message">-->

    <!-- 元素上使用 v-model 相当于做了两件事情：属性和事件

    <input :value="message" @input="message = $event.target.value" /> -->

    <!-- 绑定多个 v-model -->

    <neko-input v-model="message" v-model:info="info"></neko-input>

    <!-- 组件上使用 v-model，相当于做了两件事情：属性和事件

    <hy-input

      :modelValue="message"   // 绑定数据属性

      @update:model-value="message = $event">  // 绑定事件  $event 就是值

    </hy-input> -->

    <!-- 绑定两个 v-model -->

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

    <h2>{{ message }}</h2>

    <h2>{{ info }}</h2>

  </div>

</template>

<script>

import NekoInput from "./NekoInput.vue";

export default {

  components: {

    NekoInput,

  },

  data() {

    return {

      message: "Hello World",

      info: "Nico Niconi",

    };

  },

};

</script>

<style scoped></style>

// NekoInput.vue

<template>

  <div>

    <!-- <input type="text" :value="modelValue" @input="listeningIpt($event)" /> -->

    <!-- 使用 v-model 进行双向绑定 -->

    <input v-model="iptValue" />

    <input v-model="info" />

  </div>

</template>

<script>

export default {

  // 要渲染在页面上，须在 props 中定义接收 App 组件传递过来的 message

  props: {

    modelValue: String,

    info: Object,

  },

  emits: ["update:modelValue", "update:info"], // 监听默认绑定的事件

  computed: {

    iptValue: {

      set(value) {

        // 发送事件，传递数据

        this.$emit("update:modelValue", value);

      },

      get() {

        return this.modelValue;

      },

    },

    info: {

      set(value) {

        this.$emit("update:info", value);

      },

      get() {

        return this.info;

      },

    },

  },

};

</script>

<style scoped></style>