Vue.js父传子组件model并允许修改及封装vue-multiselect遇警告问题

Hey there! I totally get where you're stuck with this Vue prop mutation warning—wrapping vue-multiselect into reusable single/multi-select components while keeping v-model working smoothly is tricky at first, but once you lean into Vue's one-way data flow rules, it clicks.

Let’s break down the fix step by step, starting with the core issue: Vue prevents direct prop mutations because props are owned by the parent component. Instead, we need to use v-model’s underlying mechanics (a value prop + input event for Vue 2, or modelValue prop + update:modelValue event for Vue 3) to keep data flowing correctly between parent and child.

Solution for Vue 2 #

1. Reusable Single-Select Component

Create a wrapper component that passes the parent’s v-model value as a prop, then forwards vue-multiselect’s input events back to the parent.

<template>
  <multiselect
    :value="localValue"
    :options="options"
    @input="onInput"
    placeholder="Select an option"
    <!-- Add any other vue-multiselect props you need -->
  />
</template>

<script>
import Multiselect from 'vue-multiselect';

export default {
  components: { Multiselect },
  props: {
    // This binds to the parent's v-model value
    value: {
      type: [String, Number, Object],
      required: true
    },
    options: {
      type: Array,
      required: true
    }
  },
  computed: {
    // Use a computed property to "proxy" the prop
    localValue: {
      get() {
        // Return the parent's value
        return this.value;
      },
      set(newValue) {
        // Emit an input event to tell the parent to update its data
        this.$emit('input', newValue);
      }
    }
  },
  methods: {
    // Alternative to computed: directly listen to vue-multiselect's input event
    onInput(newValue) {
      this.$emit('input', newValue);
    }
  }
};
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

2. Reusable Multi-Select Component

For multi-select, the only differences are expecting an array for the value prop and enabling vue-multiselect’s multiple flag:

<template>
  <multiselect
    :value="localValue"
    :options="options"
    :multiple="true"
    @input="onInput"
    placeholder="Select multiple options"
  />
</template>

<script>
import Multiselect from 'vue-multiselect';

export default {
  components: { Multiselect },
  props: {
    value: {
      type: Array,
      required: true,
      default: () => []
    },
    options: {
      type: Array,
      required: true
    }
  },
  computed: {
    localValue: {
      get() {
        // Return a shallow copy to avoid accidental mutation of the parent's array
        return [...this.value];
      },
      set(newValue) {
        this.$emit('input', newValue);
      }
    }
  },
  methods: {
    onInput(newValue) {
      this.$emit('input', newValue);
    }
  }
};
</script>

<style src="vue-multiselect/dist/vue-multiselect.min.css"></style>

3. Using the Components in Parent

Now you can use these wrappers with clean v-model syntax, no warnings:

<template>
  <div>
    <SingleSelect
      v-model="selectedSingleItem"
      :options="allOptions"
    />
    <MultiSelect
      v-model="selectedMultiItems"
      :options="allOptions"
    />
  </div>
</template>

<script>
import SingleSelect from './SingleSelect.vue';
import MultiSelect from './MultiSelect.vue';

export default {
  components: { SingleSelect, MultiSelect },
  data() {
    return {
      selectedSingleItem: null,
      selectedMultiItems: [],
      allOptions: [
        { label: 'Option 1', value: '1' },
        { label: 'Option 2', value: '2' },
        { label: 'Option 3', value: '3' }
      ]
    };
  }
};
</script>

Quick Note for Vue 3 #

If you’re using Vue 3, the syntax is slightly different (uses modelValue prop and update:modelValue event instead of value and input):

<template>
  <multiselect
    :value="modelValue"
    :options="options"
    @input="handleInput"
  />
</template>

<script setup>
import Multiselect from 'vue-multiselect';

const props = defineProps({
  modelValue: {
    type: [String, Number, Object],
    required: true
  },
  options: {
    type: Array,
    required: true
  }
});

const emit = defineEmits(['update:modelValue']);

const handleInput = (newValue) => {
  emit('update:modelValue', newValue);
};
</script>

Key Takeaways #

• Never mutate props directly: Always let the parent own and update its data.
• Leverage v-model’s syntax sugar: It’s just a shortcut for binding a prop and listening for an update event.
• Forward events from the third-party component: vue-multiselect emits an input event with the new selection—we just pass that event up to the parent.

内容的提问来源于stack exchange，提问作者tzortzik