运用 defineProps，在子组件中根据不同页面显示不同图片

2024-01-30 18:05:06

在构建现代前端应用程序时，我们经常需要创建可重用的组件来提升代码效率和可维护性。其中，图片组件是一个常见的需求，因为它可以帮助我们在不同页面上轻松显示图像。然而，当我们需要在子组件中根据不同页面显示不同图片时，事情就会变得有点棘手。

理解 defineProps

要解决这个问题，我们需要了解 Vue.js 中的 defineProps API。defineProps 允许我们定义子组件的属性，这些属性可以从父组件传递过来。它接受一个对象作为参数，其中包含属性名称和类型。

// 子组件
import { defineProps } from 'vue'

export default {
  props: defineProps({
    image: {
      type: String,
      required: true,
    },
  }),
}

在上面的代码中，我们定义了一个名为 image 的 prop，它是一个必需的字符串类型属性。父组件可以向子组件传递 image prop，用于指定要显示的图片。

在子组件中使用 defineProps

一旦我们定义了 defineProps，我们就可以在子组件中使用它来获取父组件传递的属性。以下是如何在 Vue 组件中使用 defineProps：

<template>
  <img :src="image" alt="Image" />
</template>

<script>
import { defineProps } from 'vue'

export default {
  props: defineProps({
    image: {
      type: String,
      required: true,
    },
  }),
}
</script>

在上面的示例中，我们从 defineProps 获取 image prop，并将其绑定到 img 元素的 src 属性。这将确保子组件显示父组件传递的图片。

在不同页面显示不同图片

为了在不同页面显示不同图片，我们需要在父组件中动态传递 image prop。我们可以通过使用 v-bind 指令或 computed 属性来实现这一点。

使用 v-bind：

// 父组件
<template>
  <ChildComponent :image="currentPageImage" />
</template>

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

export default {
  components: { ChildComponent },
  data() {
    return {
      currentPageImage: 'image1.png',
    }
  },
}
</script>

在上面代码中，currentPageImage 是一个数据属性，它保存了当前页面要显示的图片。我们使用 v-bind 指令将 currentPageImage 绑定到子组件的 image prop。当 currentPageImage 更改时，子组件将自动更新并显示新的图片。

使用 computed 属性：

// 父组件
<template>
  <ChildComponent :image="getImage" />
</template>

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

export default {
  components: { ChildComponent },
  computed: {
    getImage() {
      return `image${this.$route.params.id}.png`
    }
  }
}
</script>