在 Vue 项目中巧用技巧，实现父子组件 loading 的无缝衔接

2023-09-26 02:19:12

在 Vue 项目中，父子组件之间的 loading 状态管理是一个常见的难题。 当子组件需要加载数据时，父组件往往需要显示一个 loading 状态，以提示用户正在加载中。但是，传统的做法是将 loading 状态硬编码在子组件中，这使得父子组件之间的通信变得复杂。

为了解决这个问题，我们可以使用两种技巧：

1. 父组件维护 loading，并传递给子组件

这种方式的好处是简单直接。 父组件维护一个 loading 状态，然后通过 props 将其传递给子组件。子组件收到 loading 状态后，就可以根据需要显示或隐藏 loading 组件。

2. 子组件自己维护 loading，父组件改变子组件传来的对象的属性，子组件监听该对象属性的改变

这种方式的好处是更加灵活。 子组件可以自己决定何时显示或隐藏 loading 组件，而父组件只需要改变子组件传来的对象的属性即可。子组件监听该对象属性的改变，并在属性发生变化时更新 loading 状态。

这两种技巧各有优缺点。 第一种方式简单直接，但是灵活性较差。第二种方式更加灵活，但是实现起来相对复杂一些。您需要根据自己的具体需求来选择合适的方式。

下面，我们以代码示例的形式来演示这两种技巧的实现。

1. 父组件维护 loading，并传递给子组件

<!-- 父组件 -->
<template>
  <div>
    <button @click="showLoading">Show Loading</button>
    <child-component :loading="loading"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  },
  methods: {
    showLoading() {
      this.loading = true
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <loading v-if="loading"></loading>
    <div v-else>
      <!-- 子组件的内容 -->
    </div>
  </div>
</template>

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

export default {
  props: ['loading'],
  components: {
    Loading
  }
}
</script>

2. 子组件自己维护 loading，父组件改变子组件传来的对象的属性，子组件监听该对象属性的改变

<!-- 父组件 -->
<template>
  <div>
    <button @click="changeLoading">Change Loading</button>
    <child-component :data="data"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: {
        loading: false
      }
    }
  },
  methods: {
    changeLoading() {
      this.data.loading = !this.data.loading
    }
  }
}
</script>

<!-- 子组件 -->
<template>
  <div>
    <loading v-if="data.loading"></loading>
    <div v-else>
      <!-- 子组件的内容 -->
    </div>
  </div>
</template>

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

export default {
  props: ['data'],
  components: {
    Loading
  }
}
</script>