如何在 vue.js 中控制兄弟组件的渲染顺序 [英] How to control order of rendering in vue.js for sibling component
问题描述
我有以下类型的代码:
<compA/><compB/>如何确保第一个 compA 仅在 compB 呈现后才呈现.
为什么我想要的是我对 compA 的几个元素有一些依赖性，而 compB 的样式取决于这些元素的存在.
详细原因:
我有一些复杂的 UI 设计，当你滚动时，其中一个框会固定.所以当你滚动时它不会超过屏幕，一旦你开始滚动它就会被固定并开始接触标题.所以我使用 jquery-visible 来查找 div 是否与特定的 id 在屏幕上可见，如果不可见，我会更改样式并修复该框.以下代码应该给出我在做什么的想法:
方法:{滚动(){if ($('#divId').visible(false, false, 'vertical')) {//这是来自 compA 的 div，所以我想确保它首先被渲染并且它是可见的this.isFixed = false} 别的 {this.isFixed = 真}}},挂载(){window.addEventListener('scroll', this.onScroll() }},销毁(){window.removeEventListener('scroll', this.onScroll)}我不想将它们放在同一个组件中，原因之一是这些组件的性质没有意义，另外我在很多地方使用 compA，而 compB 仅特定于一页.此外，这些布局不允许我按照评论中的建议将 compB 设为 compA 的子项.
欢迎提出任何建议.
经过编辑后，我意识到依赖项不是数据驱动的，而是事件驱动的 (onscroll).我已经尝试过 something 并且看起来很有效(代码中的 setTimeout 用于演示).
我的实现与 Jonatas 的略有不同.
RenderSwitch: {{ renderSwitch }}//用于演示<模板 v-if='renderSwitch'><comp-a></comp-a></模板><comp-b @rendered='renderSwitchSet'></comp-b>当
component-B被渲染时，它会发出一个事件，它只是在component-A和的父级中设置一个数据属性组件-B.周围的
标签用于减少v-if的额外标记.renderSwitch设置为true的那一刻.component-a被创建.
I have following kind of code:
<div>
<compA />
<compB />
</div>
How do I make sure that first compA is rendered only after it compB is rendered.
Why I want is I have some dependency on few elements of compA, and style of compB depends on presence of those elements.
Why in details:
I have some complex UI design, where one box will become fixed when you scroll. SO It will not go above the screen when you scroll, it will be fixed once you start scrolling and it start touching the header. So I am using jquery-visible to find if a div with a particular id is visible on the screen, if it is not visible, I change the style and make that box fixed. Following code should give the idea what I am doing:
methods: {
onScroll () {
if ($('#divId').visible(false, false, 'vertical')) { // This is div from the compA, so I want to make sure it is rendered first and it is visible
this.isFixed = false
} else {
this.isFixed = true
}
}
},
mounted () {
window.addEventListener('scroll', this.onScroll() }
},
destroyed () {
window.removeEventListener('scroll', this.onScroll)
}
I dont want to make those in same component as one reason is it dont make sense as the nature of these components, and other I use compA at many places, while compB is specific to only one page. Also layout of these does not allow me to make compB child of compA as suggested in comments.
Any suggestions are welcome.
After going through the edit I realised that the dependency is not data driven but event driven (onscroll). I have tried something and looks like it works (the setTimeout in the code is for demonstration).
My implementation is slightly different from that of Jonatas.
<div id="app">
RenderSwitch: {{ renderSwitch }} // for demonstration
<template v-if='renderSwitch'>
<comp-a></comp-a>
</template>
<comp-b @rendered='renderSwitchSet'></comp-b>
</div>
When the
component-Bis rendered it emits an event, which just sets a data property in the parent of bothcomponent-Aandcomponent-B.The surrounding
<template>tags are there to reduce additional markup for av-if.The moment
renderSwitchis set totrue.component-agets created.
这篇关于如何在 vue.js 中控制兄弟组件的渲染顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
