vue3封装组件添加属性

在 Vue3 中封装组件并添加属性有两种方式：

1. Props 属性

通过在组件中定义 props 属性来向组件添加自定义属性。在组件内部使用 props 属性接收父组件传递过来的值，然后在组件模版中使用这些值。

示例代码：

<template>
  <div>{{ message }}</div>
</template>

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

在父组件中使用该组件并传递 message 属性：

<template>
  <my-component message="Hello World"></my-component>
</template>

<script>
import MyComponent from "./MyComponent.vue";

export default {
  components: {
    "my-component": MyComponent
  }
};
</script>

2. 增强型 props

在 Vue3 中，可以通过 defineProps 函数来增强 props 的功能。使用 defineProps 函数可以为 props 添加类型、默认值、必填项等约束。

示例代码：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { defineProps } from "vue";

export default {
  props: defineProps({
    message: {
      type: String,
      default: "Hello World",
      required: true
    }
  })
};
</script>

在父组件中使用该组件时，可以传递 message 属性的值：

<template>
  <my-component message="Hello Vue3"></my-component>
</template>

<script>
import MyComponent from "./MyComponent.vue";

export default {
  components: {
    "my-component": MyComponent
  }
};
</script>