如何在 Vuejs 中的两个不同组件中使用 ref

Question

我有两个组件（标题和输入组件），它们应该具有相同的标题引用，当一个组件更改时，另一个组件也应该更改。我尝试了我从此讨论中的回复中所理解的内容，但它不起作用。我缺少什么？

Home.vue：

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

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

标题.vue：

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

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

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

输入.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 }
}

Answer 1

可组合函数本身并不以特殊的方式工作，这与展开函数相同，即在每个组件中评估

ref('Home')

，这会导致

title

状态在它们之间不共享。

如果意图共享状态，则应该是 全局状态：

// titles.js
export const title = ref('Home')

或者，如果每个应用程序可以有多个状态，则需要使用

provide

/

inject

:

将状态提供给组件层次结构

// Home.vue
const title = ref('Home')
provide('title', title)

// Title.vue
const title = inject('title')