:model-value和v-model的区别

`model-value` 和 `v-model` 是 Vue.js 中的两个概念，用于处理表单元素的双向绑定。

`model-value` 是一个自定义属性，用于将父组件的数据传递给子组件，并在子组件中进行显示。这种方式是通过 props 向子组件传递数据，并在子组件中使用该数据进行渲染。

示例代码如下：

<template>
  <div>
    <child-component :model-value="parentData"></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  data() {
    return {
      parentData: 'Hello from parent',
    };
  },
  components: {
    ChildComponent,
  },
};
</script>

在上述示例中，父组件通过 `:model-value` 将 `parentData` 的值传递给子组件，并在子组件中使用 `props` 接收该值进行显示。

`v-model` 是 Vue.js 提供的一个指令，用于实现表单元素的双向绑定。它可以将表单元素的值与 Vue 实例中的数据进行关联，使得数据的修改能够即时反映在表单元素上，同时表单元素的变化也能更新到数据中。

示例代码如下：

<template>
  <div>
    <input v-model="message" type="text">
    <p>{{ message }}</p>
  </div>
</template>

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

在上述示例中，`v-model` 将输入框的值与 `message` 数据进行双向绑定，当输入框的值改变时，`message` 的值也会相应地更新，反之亦然。

总结来说，`model-value` 是一种自定义属性，用于父子组件之间的数据传递，而 `v-model` 是 Vue.js 提供的指令，用于表单元素的双向绑定。它们在功能和应用场景上有一些差异。