v-model实现父子组件传值

v-model是Vue.js中用于实现父子组件之间双向数据绑定的指令。它可以在父组件中使用v-model来绑定一个值，并将这个值传递给子组件。同时，子组件可以通过修改这个值来更新父组件中的数据。

在父组件中，使用v-model指令来绑定一个值，并将这个值传递给子组件。例如：

<template>
  <div>
    <ChildComponent v-model="message"></ChildComponent>
  </div>
</template>

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

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

在子组件中，通过props接收父组件传递的值，并使用$emit方法来触发一个自定义事件，将修改后的值传递给父组件。例如：

<template>
  <div>
    <input type="text" :value="value" @input="updateValue($event.target.value)">
  </div>
</template>

<script>
export default {
  props: ['value'],
  methods: {
    updateValue(newValue) {
      this.$emit('input', newValue);
    }
  }
};
</script>

这样，当在子组件中修改输入框的值时，会通过自定义事件将新的值传递给父组件，从而实现了父子组件之间的双向数据绑定。