javascript 如何处理嵌套的Vue.js组件发出的事件？

h9vpoimq 于 2023-10-14 发布在 Java

关注(0)|答案(2)|浏览(123)

因此，我有一个“隐藏项”组件：

<template>
  <div
    class="flex cursor-pointer items-center justify-center rounded-full border-2 border-gray-300 p-1 shadow-sm transition-all duration-300 hover:scale-110 hover:bg-black hover:text-white"
    @click="$emit('event')"
    :class="isActive ? 'bg-black text-white' : ''"
  >
    <Icon @click="setActive()" :icon="icon" />
  </div>
</template>

<script setup>
import { Icon } from '@iconify/vue'
import { defineProps, defineEmits } from 'vue'
import { ref } from 'vue'
const props = defineProps({
  icon: String
})
const emits = defineEmits({
  event: String
})
const isActive = ref(false)
function setActive() {
  isActive.value = !isActive.value
  console.log(isActive.value)
}
</script>

<style scoped></style>

这是一个孩子为

<template>
  <div class="flex gap-2 rounded-3xl border-2 border-gray-300 p-2 shadow-md">
    <TipTapToolbarItem icon="ooui:bold-b"></TipTapToolbarItem>
    <TipTapToolbarItem icon="clarity:italic-line"></TipTapToolbarItem>
    <TipTapToolbarItem icon="fa-solid:strikethrough"></TipTapToolbarItem>
    <TipTapToolbarItem icon="mingcute:heading-1-fill"></TipTapToolbarItem>
    <TipTapToolbarItem icon="mingcute:code-fill"></TipTapToolbarItem>
    <TipTapToolbarItem icon="tabler:blockquote"></TipTapToolbarItem>
    <TipTapToolbarItem icon="octicon:horizontal-rule-16"></TipTapToolbarItem>
  </div>
</template>

<script setup>
import TipTapToolbarItem from './TipTapToolbarItem.vue'
</script>

<style scoped></style>

    i know i can use v-for...
    and then i use the Toolbar

<template>
  <TipTapToolbar></TipTapToolbar>
  <editor-content class="h-[200px] w-[200px] bg-blue-500" placeholder="tiptap" :editor="editor" />
</template>

工具栏项目->编辑器->编辑器
我怎么能在这里使用emits，如果该项目组件是一个子项目的emits，是一个子项目的组件，其中是使用？每一个项目都有不同的功能。
我想我可以使用全球商店，但是还有其他选择吗？

JavaScript

来源：https://stackoverflow.com/questions/77253461/how-to-handle-emitted-events-from-nested-vue-js-components

2条答案

按热度按时间

8hhllhi21#

我不确定数据应该如何流动，但对于这种父子通信，您缺少“侦听器”部分。
文件：https://vuejs.org/guide/components/events.html
由于 ToolbarItem 发出的事件名称为 event（建议将其更改为更具描述性的名称：）），请尝试将其侦听器添加到父组件中，方法，当事件发生时应该调用.
例如

<TipTapToolbarItem
  icon="ooui:bold-b"
  @event="someMethod()"
/>

如果你只需要父子通信，那么 emits 和 props 是完全好的方法（如果你不介意将两个组件耦合在一起），对于任何更复杂的事情，状态管理是一个更好的选择。Pinia可能是目前最好的。
如果它仍然不工作，尝试安装Vue.js Devtools并检查什么是emmited和如何...

赞(0）回复(0）举报 2023-10-14

y3bcpkx12#

你可以做的是使用vue的根元素发出并监听事件。只有当你想避免在所有嵌套的子组件中发射，直到你到达父组件时才这样做。下面是一个应用于您的案例的示例：
孩子

<template>
  <div
    class="flex cursor-pointer items-center justify-center rounded-full border-2 border-gray-300 p-1 shadow-sm transition-all duration-300 hover:scale-110 hover:bg-black hover:text-white"
    @click="$root.$emit('event')"
    :class="isActive ? 'bg-black text-white' : ''"
  >
    <Icon @click="setActive()" :icon="icon" />
  </div>
</template>

顶级父级

<script>
export default {
  mounted() {
    this.$root.$on('event', (name) => {
      // do something ...
    })
  }
}
</script>

否则，一个简单的链式发射就可以了
ToolbarItem

<div
    class="flex cursor-pointer items-center justify-center rounded-full border-2 border-gray-300 p-1 shadow-sm transition-all duration-300 hover:scale-110 hover:bg-black hover:text-white"
    @click="$emit('event')"
    :class="isActive ? 'bg-black text-white' : ''"
  >
    <Icon @click="setActive()" :icon="icon" />
  </div>

蒂普塔帕

<TipTapToolbarItem icon="ooui:bold-b" @event='$emit('event')></TipTapToolbarItem>

编辑部

<TipTapToolbar @event='callMyFunction'></TipTapToolbar>

赞(0）回复(0）举报 2023-10-14

我来回答

javascript 如何处理嵌套的Vue.js组件发出的事件？

2条答案

相关问题

热门标签

最新问答