Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to catch an events that was emitted from an item component? #4

Open
vvy6791 opened this issue Oct 31, 2022 · 3 comments
Open

How to catch an events that was emitted from an item component? #4

vvy6791 opened this issue Oct 31, 2022 · 3 comments

Comments

@vvy6791
Copy link

vvy6791 commented Oct 31, 2022

There the way exists for pass params TO items components via "source" item prop, or pass additional params to items components: via extra-props.
But how to get BACK a data from an item components?

  1. How to catch an events that was emitted from an item component?
  2. How to get item component instance with an index or data-key specified? Or, for example, to detect is the item in the visible scroll area (get the items bound rect within the browser window)
@good-ideal
Copy link

你可以使用一个中间组件,不需要把需要渲染的组件传递给他
image
image

@vvy6791
Copy link
Author

vvy6791 commented Nov 7, 2022

你可以使用一个中间组件,不需要把需要渲染的组件传递给他
I don't understand Сhinese, sorry. I tried to translate your answer, but it does not explain the attached pictures.
I think, if you want, that most of people clear understand you, try write in English (it's not my native language too, but I do so).


If I clear uderstand your code on screens, you suggest to use a Vuex global store.
This approach is not a good one, as I think. It breaks modularity and increases the connectivity of components.
Vue recommends to use "props - emit" scheme to comunicate parent component with its children components. And I don't see how to use this scheme with this realization of Virtual Scroller.

@sy0uta1k0n
Copy link

sy0uta1k0n commented Dec 7, 2022

你可以使用一个中间组件,不需要把需要渲染的组件传递给他
I don't understand Сhinese, sorry. I tried to translate your answer, but it does not explain the attached pictures.
I think, if you want, that most of people clear understand you, try write in English (it's not my native language too, but I do so).

If I clear uderstand your code on screens, you suggest to use a Vuex global store. This approach is not a good one, as I think. It breaks modularity and increases the connectivity of components. Vue recommends to use "props - emit" scheme to comunicate parent component with its children components. And I don't see how to use this scheme with this realization of Virtual Scroller.

Hi @vvy6791 ,
find solution here:
tangbc/vue-virtual-scroll-list#237 (comment)
both vue and vue3 have extra-props, it works for me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants