v-model和props绑定

v-model和props都是Vue中的数据绑定方式，但是它们的作用和用法是不同的。

v-model是一种语法糖，用于双向绑定表单元素的值和组件的data属性。它可以简化数据的更新和获取操作。

props是组件中父组件传递下来的属性，用于组件之间传递数据。它只能单向传递数据，即父组件向子组件传递数据，子组件不能直接修改父组件的属性。

在使用v-model时，可以通过props将父组件的属性传递给子组件，然后在子组件中使用v-model绑定该属性，这样就可以实现子组件双向绑定父组件的数据。

例如：

//父组件
<template>
  <div>
    <ChildComponent v-model="value"></ChildComponent>
    <p>父组件的值为：{{value}}</p>
  </div>
</template>

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

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      value: 'hello'
    }
  }
}
</script>

//子组件
<template>
  <input v-model="innerValue">
</template>

<script>
export default {
  props: ['value'],
  data() {
    return {
      innerValue: ''
    }
  },
  watch: {
    innerValue() {
      this.$emit('input', this.innerValue)
    },
    value() {
      this.innerValue = this.value
    }
  }
}
</script>

在上面的例子中，父组件通过v-model绑定了value属性，然后将该属性传递给子组件。子组件中使用props接收父组件传递下来的value属性，并使用v-model绑定innerValue属性。在子组件内部，通过watch监听innerValue属性的变化，并通过$emit事件通知父组件更新value属性的值。同时，当父组件的value属性发生变化时，子组件也会自动更新innerValue的值。这样就实现了子组件和父组件的双向绑定。