vue 父组件通过v-model接收子组件的值的代码

当一个子组件改变了它的状态时，父组件也会相应地随着子组件改变。Vue提供了 v-model 指令来实现这种双向绑定的效果。在子组件中，要使用 this.$emit('input', value) 将数据通过 input 事件的方式发送到父组件中，然后父组件通过 v-model 指令绑定这个事件和值即可。

举例来说，我们现在有一个父组件 Parent.vue 和一个子组件 Child.vue，其中 Child.vue 是一个输入框组件，父组件需要根据该输入框的值显示一些特定内容。具体实现的步骤如下：

1. 在 Child.vue 中，定义一个 value 变量，并在输入框上绑定 v-model="value"：

<template>
  <div>
    <input type="text" v-model="value" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      value: '',
    };
  },
  mounted() {
    // 组件挂载后，给输入框赋默认值
    this.value = 'Hello World';
  },
  watch: {
    value(newValue) {
      // 监听输入框的值，当发生改变时触发 input 事件
      this.$emit('input', newValue);
    },
  },
};
</script>

1. 在 Parent.vue 中，引入 Child.vue 组件，并在组件上使用 v-model 指令绑定父组件的值：

<template>
  <div>
    <Child v-model="parentValue" />
    <p>父组件的值：{{parentValue}}</p>
  </div>
</template>

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

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

在上面的代码中，我们将 Child.vue 组件引入到了 Parent.vue 中，并在组件上使用了 v-model="parentValue"，父组件的值 parentValue 就通过 input 事件传递给了子组件 Child.vue。

当我们在输入框中输入数据时，Child.vue 组件中的 watch 监听器会检测到数据的变化，然后通过 $emit 方法将这个变化通过 input 事件发送到父组件 Parent.vue 中，然后 v-model 绑定的 parentValue 也同时发生了变化，最后通过插值的方式输出 parentValue 的值。

下面再给出一个示例，演示如何在子组件中通过 emit 方法发送自定义的事件和值，然后在父组件中监听这些事件，并修改相应的数据。

1. 在 Child.vue 中，定义一个点击按钮，当点击该按钮时，向父组件传递一个自定义的事件和值：

<template>
  <div>
    <button @click="emitCustomEvent">点击我，通知父组件</button>
  </div>
</template>

<script>
export default {
  methods: {
    emitCustomEvent() {
      const eventData = {
        name: 'custom event',
        value: Math.random(),
      };
      // 通过自定义事件名和数据，向父组件发送数据
      this.$emit('custom-event', eventData);
    },
  },
};
</script>

1. 在 Parent.vue中，监听自定义事件，并修改对应的数据：

<template>
  <div>
    <Child @custom-event="handleCustomEvent" />
    <p>父组件监听到子组件发送的自定义事件：{{customStr}}</p>
  </div>
</template>

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

export default {
  components: {
    Child,
  },
  data() {
    return {
      customStr: '',
    };
  },
  methods: {
    handleCustomEvent(data) {
      // 监听到自定义事件后，修改数据
      this.customStr = `事件名称: ${data.name}, 随机数: ${data.value}`;
    },
  },
};
</script>

在上面的代码中，我们先在 Child.vue 中定义了一个 emitCustomEvent 方法，然后在这个方法中通过 $emit 方法向父组件发送一个自定义事件 custom-event，并且传递了一个对象 {name: 'custom event', value: Math.random()}。

在 Parent.vue 中，我们引入了 Child.vue 组件，并通过 @custom-event="handleCustomEvent" 监听子组件发送的自定义事件，当监听到该事件时，就触发 handleCustomEvent 方法，并修改 customStr 的值。

通过上述两个示例的说明，可以很好地理解如何在 Vue 的父子组件之间进行双向绑定和事件传递。