事件和自引用组件 vue.js [英] events and self referencing components vue.js
问题描述
我有评论系统，允许 1 级线程.意思是第一级评论看起来像{...内容，线: []}其中线程可能有更多评论.我虽然这对于自引用组件和带插槽的列表很有用.但是过了一会儿我不知道如何连接这个东西.
SingleComment 组件如下
... *内容*<b 按钮v-if="isCommentDeletable"@click="handleDelete"</b-按钮><div v-for="item.thread 中的项目":key="item._id"><SingleComment class="ml-3":项目=项目"/></模板>...方法: {句柄删除(){this.$emit('remove')},}...成分: {'NewComment':NewComment，'SingleComment':这个},名称:'单条评论'}
List 组件的经典列表接收项目数组作为道具，由
给出<div v-for="item in items" ...<插槽名称=列表项":项目=项目"/>这是我想将这两个组件与模态一起使用的父级父
我想在 Parent 中连接这个东西，这样我就可以对整个列表使用单个模式.我是否将事件与事件联系起来?或者?欢迎任何形式的帮助.我被困住了.我可以做一些 hack 但我真的不知道如何处理这个自引用组件.
如果您只有一层嵌套，您可以简单地将组件本身作为插槽传递，如下所示:
<Comment v-for="comment.thread 中的线程" :key="thread.id" v-bind="thread"/></评论> 那么你只需要担心传递一层深的 props，就好像你只有一个评论列表一样.我在这里在 CodeSandbox 上创建了一个示例:https://codesandbox.io/embed/vue-模板-mq24e.
<小时>如果你想使用递归方法，你只需要传递 props 和 events；没有解决这个问题的神奇解决方案.更新 CodeSandbox 示例:https://codesandbox.io/embed/vue-template-doy66.
您可以通过在映射到组件的 Vuex 存储上使用 removeitem 操作来避免显式传递 removeitem 事件侦听器.
我的观点是，越简单越好，而且一层嵌套不需要递归.让自己站在未来开发人员的角度，让代码易于阅读和推理；如果您几周没有查看代码库，那么未来的开发人员甚至可能就是您.
I have commenting system which allows 1 level thread. Meaning 1st level comment will look like { ...content, thread: [] } where thread may have more comments in it. I though this is good for self-referencing component and List with Slots. But after a while I do not know how to wire this thing up.
SingleComment component is given below
<template>
... *content*
<b-button
v-if="isCommentDeletable"
@click="handleDelete"
</b-button>
<div v-for="item in item.thread" :key="item._id">
<SingleComment class="ml-3"
:item="item"
/>
</div>
</template>
...
methods: {
handleDelete () {
this.$emit('remove')
},
}
...
components: {
'NewComment': NewComment, 'SingleComment': this
},
name: 'SingleComment'
}
</script>
List component classic list is recieving array of items as prop and is given by
<div v-for="item in items" ...
<slot
name="listitem"
:item="item"
/>
</div>
and this is the parent where I want to use these two components with modal Parent
<AppModal
>
...
<List
class="my-1"
:items="comments.docs"
>
<template v-slot:listitem="{ item }">
<SingleComment
:item="item"
:remove="removeItem"
@remove="removeItem"
/>
</template>
</List>
I want to wire this thing up in Parent so I can use single modal for whole list. Do I wire thins thing up with events? Or? Any sort of help is welcome. I am stuck. I can make some hacks but I really do not know how to deal with this self referencing components.
If you only have one level of nesting, you could simply pass the component itself as a slot, like so:
<Comment v-for="comment in comments" :key="comment.id" v-bind="comment">
<Comment v-for="thread in comment.thread" :key="thread.id" v-bind="thread" />
</Comment>
Then you will only have to worry about passing props one level deep, as if you only had a single list of comments. I created an example of this on CodeSandbox here: https://codesandbox.io/embed/vue-template-mq24e.
If you want to use a recursive approach, you'll just have to pass props and events around; there's no magic solution that steps around this. Update CodeSandbox example: https://codesandbox.io/embed/vue-template-doy66.
You could avoid explicitly passing the removeitem event listener down by having a removeitem action on your Vuex store that you map to your component.
My opinion here, is that simpler is better, and you don't need recursion for one level of nesting. Put yourself in the shoes of a future developer and make the code easy to read and reason about; that future developer may even be you when you haven't looked at the codebase in a few weeks.
这篇关于事件和自引用组件 vue.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
