vue3中间组件传递v-model事件

在Vue 3中，V-model是双向数据绑定的重要组成部分，它主要用于简化表单元素的数据同步。如果你想在中间组件之间传递V-model事件，你可以通过props和emit来实现。首先，在父组件中将需要监听的V-model值作为prop传递给中间组件：

<template>
  <parent-component :modelValue="inputValue" @input="handleInput"></parent-component>
</template>

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

export default {
  components: { ParentComponent },
  data() {
    return {
      inputValue: '',
    };
  },
  methods: {
    handleInput(value) {
      // 处理输入值的变更
    },
  },
};
</script>

然后在中间组件（假设名为ChildComponent.vue）接收这个值，并触发自定义事件`input`来更新父组件：

<template>
  <div>
    <input v-model="value" @input="emitInput" />
  </div>
</template>

<script>
export default {
  props: ['modelValue'],
  emits: ['input'], // 需要在组件上声明要触发的自定义事件

  data() {
    return {
      value: this.modelValue,
    };
  },
  methods: {
    emitInput(e) {
      this.$emit('input', e.target.value);
    },
  },
};
</script>

当用户在中间组件的输入框中改变值时，会触发`emitInput`方法并传递新值到父组件，从而实现了V-model事件的传递。