Vue3组合式API下Menu与Text组件间数据共享实现问询

场景1：Menu与Text为父子/有共同父组件 #

这种层级关系下，用props + emit是最直接的方案：

1. 共同父组件（如App.vue）管理状态 #

<template>
  <Menu @update-rule="updateCurrentRule" />
  <Text :active-rule="currentRule" />
</template>

<script setup>
import { ref } from 'vue'
import Menu from './components/Menu.vue'
import Text from './components/Text.vue'

// 父组件维护共享状态
const currentRule = ref('')

// 接收Menu传递的规则名并更新状态
const updateCurrentRule = (ruleName) => {
  currentRule.value = ruleName
}
</script>

2. Menu.vue触发事件传递值 #

<template>
  <div 
    v-for="rule in ruleList" 
    :key="rule.ruleName"
    @click="handleRuleClick(rule.ruleName)"
  >
    {{ rule.ruleName }}
  </div>
</template>

<script setup>
import { defineEmits } from 'vue'

// 定义要触发的事件
const emit = defineEmits(['update-rule'])

// 示例规则列表
const ruleList = [
  { ruleName: '规则1' },
  { ruleName: '规则2' }
]

// 点击时向父组件传递ruleName
const handleRuleClick = (ruleName) => {
  emit('update-rule', ruleName)
}
</script>

3. Text.vue接收并存储值 #

<template>
  <div>当前选中规则：{{ storedRule }}</div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { defineProps } from 'vue'

// 接收父组件传递的规则名
const props = defineProps({
  activeRule: {
    type: String,
    default: ''
  }
})

// 本地存储规则名（可根据需求选择是否保留）
const storedRule = ref(props.activeRule)

// 监听props变化，同步更新本地存储
watch(() => props.activeRule, (newName) => {
  storedRule.value = newName
  // 可选：持久化到localStorage
  localStorage.setItem('selectedRule', newName)
})
</script>

场景2：Menu与Text为非父子组件（无共同父/层级较深） #

这种情况用provide/inject或Pinia状态管理更高效：

方案A：provide/inject跨层级传值 #

1. 根/共同祖先组件提供状态

<!-- App.vue -->
<script setup>
import { ref, provide } from 'vue'
import Menu from './components/Menu.vue'
import Text from './components/Text.vue'

const currentRule = ref('')

// 提供状态和修改方法
provide('ruleContext', {
  currentRule,
  setRuleName: (name) => {
    currentRule.value = name
  }
})
</script>

2. Menu.vue注入并调用修改方法

<script setup>
import { inject } from 'vue'

const ruleContext = inject('ruleContext')

const handleRuleClick = (ruleName) => {
  ruleContext.setRuleName(ruleName)
}
</script>

3. Text.vue注入并存储值

<script setup>
import { ref, watch, inject } from 'vue'

const ruleContext = inject('ruleContext')
const storedRule = ref(ruleContext.currentRule.value)

watch(() => ruleContext.currentRule.value, (newName) => {
  storedRule.value = newName
  localStorage.setItem('selectedRule', newName)
})
</script>

方案B：Pinia全局状态管理（适合复杂场景） #

1. 创建Pinia Store

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

export const useRuleStore = defineStore('rule', {
  state: () => ({
    selectedRule: ''
  }),
  actions: {
    updateRuleName(name) {
      this.selectedRule = name
      // 可选持久化
      localStorage.setItem('selectedRule', name)
    }
  }
})

2. Menu.vue调用Store方法

<script setup>
import { useRuleStore } from '../stores/ruleStore'

const ruleStore = useRuleStore()

const handleRuleClick = (ruleName) => {
  ruleStore.updateRuleName(ruleName)
}
</script>

3. Text.vue获取并存储值

<script setup>
import { ref, watch } from 'vue'
import { useRuleStore } from '../stores/ruleStore'

const ruleStore = useRuleStore()
const storedRule = ref(ruleStore.selectedRule)

watch(() => ruleStore.selectedRule, (newName) => {
  storedRule.value = newName
})
</script>

关于“Modifiers cannot appear here”报错 #

这个错误通常是你在export default中错误使用了修饰符（如.sync）或不符合Vue3语法的写法导致的。上面用<script setup>的组合式API写法，完全遵循Vue3规范，可避免这类语法错误。

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