面试题：Vue组件复用性之基础props传值

Question

在Vue组件复用场景下，假设有一个通用的按钮组件，需要根据不同的业务场景显示不同的按钮文本。请阐述如何通过props来实现这个功能，并写出具体的组件代码示例，包括父组件和子组件代码。

Answer 1

子组件（按钮组件 Button.vue）

<template>
  <button>{{ buttonText }}</button>
</template>

<script setup>
defineProps({
  buttonText: {
    type: String,
    required: true
  }
});
</script>

<style scoped>
/* 可添加按钮样式 */
</style>

父组件（调用按钮组件的组件，假设为 Parent.vue）

<template>
  <div>
    <Button :buttonText="textForScene1" />
    <Button :buttonText="textForScene2" />
  </div>
</template>

<script setup>
import Button from './Button.vue';

const textForScene1 = '场景1按钮文本';
const textForScene2 = '场景2按钮文本';
</script>

<style scoped>
/* 可添加父组件样式 */
</style>

通过在子组件中定义 props 接收父组件传递的按钮文本，父组件根据不同业务场景传递不同的文本值，从而实现通用按钮组件在不同业务场景下显示不同按钮文本的功能。