Vue中能否将v-model值传递至其他组件？

当然可以把v-model绑定的值传递到其他组件啦！下面我结合不同的组件关系场景，给你具体讲讲实现方法，不管是父子组件、兄弟组件还是跨层级组件，都有对应的解决方案~

v-model的本质其实是v-bind:value + v-on:input的语法糖，所以父子组件间传递核心就是通过prop传值 + 事件触发更新来实现，Vue 3还支持更简洁的自定义v-model写法。

示例1：Vue 2/Options API写法 #

父组件代码 #

<template>
  <div>
    <!-- 父组件自身使用v-model绑定变量 -->
    <input v-model="parentInputValue" placeholder="输入内容" />
    <!-- 方式1：手动传递value和监听input事件 -->
    <ChildComponent :value="parentInputValue" @input="parentInputValue = $event" />
    <!-- 方式2：直接用v-model绑定（Vue 2中默认对应子组件的value prop和input事件） -->
    <ChildComponent v-model="parentInputValue" />
  </div>
</template>

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

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

子组件代码 #

<template>
  <div>
    <p>子组件收到的值：{{ value }}</p>
    <!-- 如果需要在子组件修改值，必须通过触发input事件通知父组件更新 -->
    <button @click="$emit('input', '子组件修改后的内容')">修改值</button>
  </div>
</template>

<script>
export default {
  props: {
    value: {
      type: String,
      default: ''
    }
  }
}
</script>

示例2：Vue 3/Composition API写法 #

Vue 3中v-model默认对应子组件的modelValue prop和update:modelValue事件，也支持自定义v-model参数：

子组件代码 #

<template>
  <div>
    <p>子组件收到的值：{{ modelValue }}</p>
    <button @click="handleUpdateValue">修改值</button>
  </div>
</template>

<script setup>
// 定义接收的prop和要触发的事件
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])

const handleUpdateValue = () => {
  // 触发事件通知父组件更新值
  emit('update:modelValue', '子组件通过Composition API修改的值')
}
</script>

父组件代码 #

<template>
  <div>
    <input v-model="parentValue" placeholder="输入内容" />
    <!-- 直接用v-model绑定即可 -->
    <ChildComponent v-model="parentValue" />
  </div>
</template>

<script setup>
import ChildComponent from './ChildComponent.vue'
import { ref } from 'vue'

const parentValue = ref('')
</script>

兄弟组件没有直接的通信通道，通常有两种解决方案：

方案1：父组件作为中间层 #

让父组件统一管理v-model的值，再分别传递给两个兄弟组件：

父组件代码 #

<template>
  <div>
    <!-- 输入型兄弟组件 -->
    <InputComponent v-model="sharedValue" />
    <!-- 显示型兄弟组件 -->
    <DisplayComponent :value="sharedValue" />
  </div>
</template>

<script setup>
import InputComponent from './InputComponent.vue'
import DisplayComponent from './DisplayComponent.vue'
import { ref } from 'vue'

// 父组件维护共享值
const sharedValue = ref('')
</script>

InputComponent（输入组件） #

<template>
  <input v-model="localValue" @input="emit('update:modelValue', localValue)" />
</template>

<script setup>
const props = defineProps(['modelValue'])
const emit = defineEmits(['update:modelValue'])
const localValue = ref(props.modelValue)
</script>

DisplayComponent（显示组件） #

<template>
  <p>兄弟组件传来的值：{{ value }}</p>
</template>

<script setup>
defineProps(['value'])
</script>

方案2：状态管理工具（Pinia/Vuex） #

如果你的项目中有多个组件需要共享这个值，或者组件层级复杂，推荐用状态管理工具统一维护：

示例：Pinia（Vue 3推荐） #

首先定义一个store：

// stores/valueStore.js
import { defineStore } from 'pinia'

export const useValueStore = defineStore('valueStore', {
  state: () => ({
    sharedValue: ''
  }),
  actions: {
    updateValue(newValue) {
      this.sharedValue = newValue
    }
  }
})

然后在任意组件中使用：

输入组件

<template>
  <input v-model="store.sharedValue" />
</template>

<script setup>
import { useValueStore } from '@/stores/valueStore'
const store = useValueStore()
</script>

显示组件

<template>
  <p>从store获取的值：{{ store.sharedValue }}</p>
</template>

<script setup>
import { useValueStore } from '@/stores/valueStore'
const store = useValueStore()
</script>

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