vue props label

在 Vue.js 中，props（属性）用于从父组件向子组件传递数据。如果你想要给 props 添加一个标签，你可以使用自定义 props 的方式。

在父组件中，你可以为子组件传递一个带有标签的 props 值。例如：

<template>
  <div>
    <child-component :label="labelText"></child-component>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelText: '<span style="color: red;">Hello from parent</span>',
    };
  },
};
</script>

在子组件中，你可以使用 v-html 指令将传递的 label props 渲染为 HTML 标签。例如：

<template>
  <div>
    <p v-html="label"></p>
  </div>
</template>

<script>
export default {
  props: {
    label: String,
  },
};
</script>

这样，父组件传递的含有标签的 labelText 就会被子组件渲染为带有样式的文本。要注意的是，使用 v-html 指令需要谨慎，确保传递的内容来自可信任的来源，以避免安全风险。