Vue.js 如何以惯用的方式触发 vue3 中同级组件的效果

// App.vue (parent)
const trigger = ref(null)
function setTrigger() {
  trigger.value = Symbol('new trigger')
}
</script>

<template>
    <SiblingOne @on-click="setTrigger" />
    <SiblingTwo :trigger="trigger" />
</template>



// Sibling1.vue
<script setup>
const emit = defineEmits(['on-click'])
</script>

<template>
  <button @click="emit('on-click')">update</button>
</template>

// Sibling2.vue
<script setup>
import { watch } from 'vue'
const props = defineProps({ trigger: null })

watch(
  () => props.trigger,
  () => console.log(new Date())
)
</script>
<template>Nothing to see here, check console</template>

<script setup>
const siblingTwo = ref(null);
</script>

<template>
    <SiblingOne @click="siblingTwo?.trigger" />
    <!-- or -->
    <SiblingOne @click="siblingTwo.trigger()" />

    <SiblingTwo ref="siblingTwo" />
</template>

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

defineExpose({
  trigger() {
    console.log(new Date())
  }
})
</script>

Vue.js相关问答推荐

如何在Vue3中使用vuechartjs 5.2从父组件更新图表

在vuejs中使用表单追加时如何使用布尔值

Vue.js 3 运行时挂载组件实例

我在表格中创建了一个包含信息的新行，但在 Cypress e2e 测试中我无法获得最后一行(新行)

使用计算(computed)属性更改视图

Vue.js 开发工具未显示

VueJs this.method 不是函数？如何在 Vuejs 的另一个方法中调用一个方法？

如何更新手动安装的 vue 组件上的props？

在基于 TypeScript 的 Vue 中将 vuex 状态和Mutations绑定到复选框组件属性

命名空间模块身份验证的重复命名空间身份验证

使用 Blade/Mustache 模板混合 Laravel 和 Vue.Js

此 set-cookie 已被阻止，因为它具有 samesite=lax

NUXT如何将数据从页面传递到布局

Jest错误找不到模块....

Vuex - 何时从 http 服务器加载/初始化存储数据

Vuejs 3 从子组件向父组件发出事件

如何将数据传递给 Vue.js 中的路由视图

'vue' 未被识别为内部或外部命令

在 vue js 中的何处以及如何存储 API 端点？

为什么 router.currentRoute.path 没有react？