Vue 3：如何将所有发出的事件转发到父组件？

wdebmtf2 于 2023-03-24 发布在 Vue.js

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

Vue组件的结构如下：

<TopParent> <!-- listen for EventProducer's events here -->
  <Child_1>
    <Child_2>
      <Child_3>
        ... 
        <Child_N>
          <EventProducer /> <!-- emit events here --> 
        </Child_N>

      </Child_3>
    </Child_2>
  </Child_1>
</TopParent>

问题

我想在<EventProducer>组件中emit一个事件并监听<TopParent>组件中的事件？
如何告诉所有<Child_1>...<Child_N>组件只将事件转发给父组件？
P.S.我不想指定事件的确切名称，只是转发所有事件。

愚蠢的解决办法

在一个非常原始的方式，我可以这样做。但它非常冗长，特别是当有一个以上的事件：

<TopParent @foo="doTheJob()">
  <Child_1  @foo="emit('foo')">
    <Child_2  @foo="emit('foo')">
      <Child_3  @foo="emit('foo')">
        ... 
        <Child_N @foo="emit('foo')">
          <EventProducer @click="emit('foo')"/> 
        </Child_N>

      </Child_3>
    </Child_2>
  </Child_1>
</TopParent>

我相信有比这更好的办法。

vue.js

来源：https://stackoverflow.com/questions/75812064/vue-3-how-to-forward-all-emitted-events-to-a-parent-component

2条答案

按热度按时间

hyrbngr71#

有几种方法可以将数据传递给子/父组件。在实现之前，请注意您确切需要的内容

Provide / Inject（可以是全局）
1.存储vuex;pinia（可以是全局）
emit/props（仅父/子）
useComposition （可以是全局的）

// composition file 
import { ref } from 'vue'

const someString = ref<string>('')

export const useComposition = () => {
  return {
    someString,
  }
}

// usage 
import { useComposition } from 'path/to/file'
const { someString } = useComposition()

赞(0）回复(0）举报 2023-03-24

mnowg1ta2#

这可以通过provide/inject特性来实现。
这个想法是提供一种从TopParent到EventProducer的“回调函数”。
TopParent组件内部：

import { provide } from 'vue';

...
function activateOnEvent() {
  //...
}

provide('parentFn', activateOnEvent); //key, value

EventProducer组件内部：

import { inject } from 'vue';
...
const parentFn = inject('parentFn');
...
<button @click="parentFn()">Click</button>

因此，在你的事件上，你可以直接从TopParent组件调用一个函数。

赞(0）回复(0）举报 2023-03-24

我来回答

Vue 3：如何将所有发出的事件转发到父组件？

2条答案

相关问题

热门标签

最新问答