형제 구성 요소에 대한 vue.js의 렌더링 순서를 제어하는 방법

형제 구성 요소에 대한 vue.js의 렌더링 순서를 제어하는 방법

코드 종류는 다음과 같습니다.

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

어떻게 하면 먼저 그것을 확인할 수 있을까요?compA그 후에만 렌더링된다.compB렌더링 됩니다.

내가 원하는 이유는 몇 가지 요소에 의존하기 때문이다.compA, 및 스타일compB그 요소들의 존재에 달려있습니다.

자세한 이유:

저는 복잡한 UI 디자인을 가지고 있어서 스크롤을 하면 하나의 상자가 고정됩니다.스크롤을 해도 화면 위로 이동하지 않고 스크롤을 시작하고 헤더를 터치하면 고정됩니다.그래서 저는 jquery-visible을 사용하여 이 시스템이div특별히id화면에 보이면 안 보이면 스타일을 바꾸고 상자를 고정합니다.다음 코드를 통해 무엇을 하고 있는지 알 수 있습니다.

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는 1페이지에만 한정됩니다.또한 이러한 레이아웃은 내가 만들 수 없습니다.compB의 자식compA댓글에 있는 것처럼

어떤 제안이라도 환영합니다.

이벤트 포함 옵션:

<!-- 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>

편집 과정을 통해 의존성은 데이터 중심적인 것이 아니라 이벤트 중심적인 것임을 알게 되었습니다(온스크롤).시도해보니 효과가 있는 것 같습니다(코드의 set Timeout은 데모용입니다).

나의 실장은 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작성됩니다.

언급URL : https://stackoverflow.com/questions/43071742/how-to-control-order-of-rendering-in-vue-js-for-sibling-component