如何控制 vue.js 中兄弟组件的渲染顺序 [英] How to control order of rendering in vue.js for sibling component

问题描述

我有以下类型的代码:

<compA/><compB/></div>

如何确保第一个 compA 仅在 compB 被渲染后才被渲染.

我想要的是我对 compA 的少数元素有一些依赖，而 compB 的样式取决于这些元素的存在.

为什么要详细说明:

我有一些复杂的 UI 设计，滚动时会固定一个框.所以当你滚动时它不会超出屏幕，一旦你开始滚动它就会固定它开始触摸标题.所以我使用 jquery-visible 来查找 div 是否与特定的 id 在屏幕上可见，如果不可见，我更改样式并固定该框.以下代码应该说明我在做什么:

方法:{onScroll () {if ($('#divId').visible(false, false, 'vertical')) {//这是来自 compA 的 div，所以我要确保它先渲染并且可见this.isFixed = false} 别的 {this.isFixed = true}}},挂载(){window.addEventListener('scroll', this.onScroll() }},销毁(){window.removeEventListener('scroll', this.onScroll)}

我不想在同一个组件中制作它们，原因之一是这些组件的性质没有意义，其他我在许多地方使用 compA，而 compB 仅特定于一页.这些布局也不允许我按照评论中的建议将 compB 设为 compA 的子级.

欢迎提出任何建议.

解决方案

经过编辑后，我意识到依赖不是数据驱动的，而是事件驱动的(onscroll).我已经尝试过 something 并且看起来可行(代码中的 setTimeout 用于演示).

我的实现与 Jonatas 的实现略有不同.

<div id="app">RenderSwitch: {{ renderSwitch }}//用于演示<模板 v-if='renderSwitch'><comp-a></comp-a></模板><comp-b @rendered='renderSwitchSet'></comp-b></div>

1. 当 component-B 被渲染时，它会发出一个事件，该事件只是在 component-A 和 的父级中设置一个数据属性组件-B.

2. 周围的 <template> 标签用于减少 v-if 的额外标记.

3. 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>

1. When the component-B is rendered it emits an event, which just sets a data property in the parent of both component-A and component-B.

2. The surrounding <template> tags are there to reduce additional markup for a v-if.

3. The moment renderSwitch is set to true. component-a gets created.

这篇关于如何控制 vue.js 中兄弟组件的渲染顺序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！