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

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

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

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

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

4. 异步加载数据完成后，再通过 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 动画，并且通过事件可以与其他组件进行联动，实现更加灵活的交互效果。