11

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

 2 years ago
source link: https://www.geekjc.com/post/5f52312657bd6b25ede6264b
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
关注本文作者公众号获取最新福利

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

时间: 09/04/2020作者: ll浏览量: 1124

代码如下:

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

如何确保第一个compA仅在其compB被渲染之后才被渲染。 我想要的是我对compA的几个元素有一些依赖性，而compB的样式取决于这些元素的存在。

在父级data里加入一个属性，用户判断comB是否渲染完成。 例如加入属性renderDone，初始值为false。

在comB 生命周期函数mouted里面触发使renderDone为true。

具体代码如下：

<div>
  <compA v-if="renderDone" />
  <compB updateRender="(data) => renderDone = data" />
</div>

compB组件

mouted() {
  this.$emit('updateRender', true)
}
关注下面的标签，发现更多相似的文章

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK