如何控制 vue.js 中兄弟组件的渲染顺序

Question

我有以下类型的代码：

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

如何确保第一个 compA 仅在呈现 compB 之后才呈现。

为什么我想要的是我对compA 的几个元素有一些依赖，而compB 的样式取决于这些元素的存在。

为什么要详细说明：

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

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)
}

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

欢迎提出任何建议。

Answer 1

带有事件的选项：

<!-- Parent -->
<div>
  <comp-a @rendered="rendered = true"></comp-a>
  <component :is="compB"></component>
</div>
<script>
  // import ...
  export default {
    components: { CompA, CompB },
    watch: {
      rendered: function (val) {
        if (val) this.compB = 'comp-b';
      }
    },
    data() {
      return {
        rendered: false,
        compB: null
      }
    }
  }
</script>

<!-- Component B -->
<script>
  export default {
    mounted() {
      this.$emit('rendered');
    }
  }
</script>

Answer 2

在完成编辑后，我意识到依赖不是数据驱动的，而是事件驱动的（onscroll）。我已经尝试过something 并且看起来它可以工作（代码中的 setTimeout 用于演示）。

我的实现与 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. 当component-B 被渲染时，它会发出一个事件，该事件只是在component-A 和component-B 的父级中设置一个数据属性。

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

3. 时刻 renderSwitch 设置为 true。 component-a 被创建。