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

Question

我有以下类型的代码：

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

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

为什么我要的是我对的几个要素一些依赖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 ，其他原因我在很多地方都使用了compA ，而compB仅限于一页。 同样，这些布局不允许我按照注释中的建议成为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）。 我尝试了一些东西 ，看起来像它可以工作（代码中的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的父级中设置了data属性。

2. 周围的<template>标记用于减少v-if附加标记。

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