Vue 如何实现异步加载 loading 动画，并与其他组件联动

Vue 可以通过使用组件的 mounted 和 destroyed 生命周期函数来实现异步加载 loading 动画，并与其他组件联动。具体实现步骤如下：

创建 loading 组件，可以使用第三方库如 Spin.js 或者自定义组件。

在需要异步加载的组件中，使用 v-if 或者 v-show 指令来控制 loading 组件的显示和隐藏。

在异步加载数据的方法中，先通过 this.$emit() 发送一个事件，在 loading 组件中监听该事件并显示 loading 动画。

异步加载数据完成后，再通过 this.$emit() 发送一个事件，通知 loading 组件隐藏 loading 动画。

代码示例：
<template>
<div>
<loading v-if="loading"></loading>
<div v-if="!loading">
<!-- 异步加载数据 -->
</div>
</div>
</template>

<script>
import Loading from '@/components/Loading.vue'

export default {
components: {
Loading
},
data() {
return {
loading: true
}
},
mounted() {
this.loadData()
},
methods: {
loadData() {
this.$emit('loading', true)
// 异步加载数据
this.$emit('loading', false)
}
}
}
</script>
登录后复制
在 loading 组件中监听事件并显示 loading 动画：
<template>
<div v-show="show">
<!-- 显示 loading 动画 -->
</div>
</template>

<script>
export default {
data() {
return {
show: false
}
},
mounted() {
this.$parent.$on('loading', (value) => {
this.show = value
})
},
destroyed() {
this.$parent.$off('loading')
}
}
</script>
登录后复制
这样就可以实现异步加载 loading 动画，并且通过事件可以与其他组件进行联动，实现更加灵活的交互效果。