Vue中使用model属性

在Vue中，可以通过使用model属性来实现子组件向父组件传递数据的功能。具体来说，当子组件需要向父组件传递数据时，可以在子组件中使用model属性来定义一个prop和一个事件，然后在父组件中使用v-model指令来绑定这个prop和事件。这样，当子组件中的数据发生变化时，就会触发相应的事件，从而将数据传递给父组件。

下面是一个示例：

子组件：

<template>
  <input v-model="innerValue" @input="$emit('update:value', innerValue)">
</template>

<script>
export default {
  props: {
    value: String
  },
  data() {
    return {
      innerValue: this.value
    }
  }
}
</script>

在这个子组件中，我们定义了一个prop叫做value，用来接收父组件传递过来的数据。同时，我们也定义了一个data属性innerValue，用来保存子组件内部的数据。在模板中，我们使用v-model指令将innerValue和父组件的value绑定起来，并在input事件中触发一个名为update:value的事件，将innerValue的值传递给父组件。

父组件：

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

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

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

在父组件中，我们使用v-model指令将子组件的value属性和message属性绑定起来。这样，当子组件中的数据发生变化时，就会自动更新父组件的message属性，并将其显示出来。