Vue3项目中如何实现可复用组件的部分模板可选显示？

针对你在复用MovieCard组件时，需要在ActorDetails场景下隐藏评分气泡的需求，这里提供几个简单可靠的实现方案：

方案一：通过Props控制显示（最推荐） #

这是最符合Vue组件设计思想的方案，通过给MovieCard添加一个可选的props来控制评分元素的显示状态，灵活且易维护。

步骤： #

1. 在MovieCard组件中定义props，设置默认值为true（默认显示评分）：

<template>
  <!-- 组件其他内容 -->
  <span 
    v-if="showScore"
    :title="`Score: ${movie.vote_average}`" 
    class="score"
  >
    {{ movie.vote_average }}
  </span>
</template>

<script setup lang="ts">
const props = defineProps<{
  movie: { vote_average: number }
  showScore?: boolean
}>()

// 处理默认值，当未传入showScore时默认显示
const showScore = props.showScore ?? true
</script>

2. 在不同场景中使用：

<!-- MoviesList 场景：默认显示评分 -->
<MovieCard :movie="movieItem" />

<!-- ActorDetails 场景：隐藏评分 -->
<MovieCard :movie="movieItem" :showScore="false" />

方案二：动态Class结合Props #

如果需要保留DOM元素（比如后续可能需要切换显示状态），可以用动态class配合组件内的scoped样式来隐藏元素：

<template>
  <span 
    :title="`Score: ${movie.vote_average}`" 
    class="score"
    :class="{ 'score--hidden': !showScore }"
  >
    {{ movie.vote_average }}
  </span>
</template>

<script setup lang="ts">
const props = defineProps<{
  movie: { vote_average: number }
  showScore?: boolean
}>()

const showScore = props.showScore ?? true
</script>

<style scoped>
.score--hidden {
  display: none;
  /* 或者用 visibility: hidden; 保留占位空间 */
}
</style>

方案三：深度选择器（不推荐） #

如果暂时不想修改MovieCard组件，可以在ActorDetails的scoped样式中使用Vue3的深度选择器:deep()来穿透子组件的scoped样式，但这种方式耦合性高，依赖子组件的class命名，后续维护风险大：

<!-- ActorDetails 组件 -->
<script setup lang="ts">
// 组件逻辑
</script>

<style scoped>
:deep(.score) {
  display: none;
}
</style>

总结 #

优先选择方案一，它不仅清晰直观，还能保证组件的独立性和复用性，避免样式耦合带来的问题。

内容的提问来源于stack exchange，提问作者Razvan Zamfir