Vue.js中如何在两个组件间共享ref实现数据同步？

问题描述 #

我有Title和Input两个组件，希望它们共享同一个title ref，一方修改时另一方同步变化。尝试用组合式函数实现但未成功，请问问题出在哪？

相关代码 #

Home.vue

<template>
  <Title></Title>
  <Input></Input>
</template>

<script setup>
import Input from '../Components/Input.vue';
import Title from '../Components/Title.vue';
</script>

Title.vue

<template>
  <h1 class="text-4xl font-bold">{{ title }}</h1>
</template>

<script setup>
import useTitles from '../composables/titles';

const { title } = useTitles();
</script>

Input.vue

<template>
  <input type="text" v-model="title">
  <button @click="change">submit</button>
</template>

<script setup>
import useTitles from '../composables/titles';

const { title } = useTitles();

const change = () => {
  title.value = 'title changed'
}
</script>

titles.js

import { ref } from 'vue'

export default function useTitles() {
  const title = ref('Home')

  return { title }
}

问题根源 #

当前的组合式函数useTitles每次调用都会创建一个全新的ref实例，Title和Input组件各自调用该函数，拿到的是两个完全独立的ref，自然无法同步状态。

解决方法 #

要实现状态共享，需要让组合式函数返回同一个ref实例，而非每次调用都新建。只需将ref提升到函数外部，作为单例存在：

修改titles.js：

import { ref } from 'vue'

// 将ref提升到函数外部，确保所有调用共享同一个实例
const title = ref('Home')

export default function useTitles() {
  // 直接返回已创建的ref，不再每次新建
  return { title }
}

这样无论Title还是Input组件调用useTitles，拿到的都是同一个ref对象，修改其中一方的title.value时，另一方的视图会自动同步更新。

补充说明 #

如果需要更复杂的状态管理（比如多实例隔离、模块化状态），可以使用Vue官方的Pinia状态管理库，它能更优雅地处理组件间的状态共享逻辑。

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