前端 一段文本怎么封装一个组件 使传入的数据 可以动态添加粗样式 并写出代码

可以封装一个文本组件，组件接收一个字符串类型的文本数据和一个布尔类型的 bold 属性，用于控制是否添加粗体样式。

以下是一个简单的文本组件的代码示例：

<template>
  <span :class="{ 'bold': bold }">
    {{ text }}
  </span>
</template>

<script>
export default {
  name: 'MyText',
  props: {
    text: {
      type: String,
      required: true
    },
    bold: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style>
.bold {
  font-weight: bold;
}
</style>

在上面的代码中，我们定义了一个名为 MyText 的组件，组件接收两个 props：text 和 bold。text 表示要显示的文本，bold 表示是否添加粗体样式，默认为 false。

在组件的模板中，我们使用一个 span 标签来显示文本，并通过 :class 绑定 bold 属性来控制是否添加粗体样式。最后，我们在组件的样式中定义了一个名为 bold 的类，用于添加粗体样式。

使用该组件的示例代码如下：

<template>
  <div>
    <MyText :text="message" :bold="isBold" />
  </div>
</template>

<script>
import MyText from '@/components/MyText.vue'

export default {
  name: 'App',
  components: {
    MyText
  },
  data() {
    return {
      message: 'Hello World!',
      isBold: false
    }
  },
  methods: {
    toggleBold() {
      this.isBold = !this.isBold
    }
  }
}
</script>

在上面的代码中，我们将 MyText 组件引入到了 App 组件中，并通过 :text 和 :bold 绑定了 message 和 isBold 两个数据属性。当用户点击按钮时，会调用 toggleBold 方法来切换 isBold 的值，从而实现动态添加或取消粗体样式的效果。