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

Question

我有以下类型的代码：

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

如何确保第一个 compA 只在第一个 compB 被渲染后才被渲染。

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

为什么详细:

我有一些复杂的 UI 设计，其中一个框会在您滚动时固定。所以当你滚动时它不会超出屏幕，一旦你开始滚动它就会固定并开始触摸 header。所以我使用 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 是特定的只有一页。此外，这些布局不允许我按照评论中的建议制作 compB child of 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>

当呈现 component-B 时，它会发出一个事件，它只是在 component-A 和 component-B 的父级中设置一个数据属性 .
周围的 <template> 标签用于减少 v-if.
时刻renderSwitch设置为true。 component-a 已创建。

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

How to control order of rendering in vue.js for sibling component

javascript

vue.js

vue-component

vuejs2