vue3自定义属性详解

Vue3 中，自定义属性可以通过 `setup` 函数中的 `props` 和 `attrs` 来实现。

1. `props`：用来接收父组件传递下来的属性。在 `setup` 函数中使用 `defineProps` 函数定义，可以设置类型、默认值等属性。

例如，定义一个 `message` 属性：

import { defineComponent, defineProps } from 'vue'

const MyComponent = defineComponent({
  props: {
    message: {
      type: String,
      default: 'Hello World'
    }
  },
  setup(props) {
    console.log(props.message) // 输出 'Hello World'
  }
})

2. `attrs`：用来接收没有在 `props` 中定义的属性。在 `setup` 函数中使用 `setup` 函数中的第二个参数来访问。

例如，定义一个 `title` 属性：

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  setup(props, { attrs }) {
    console.log(attrs.title) // 输出 'Custom Title'
  }
})

如果想要给父组件传递一个未定义的属性，可以使用 `v-bind` 或简写 `:`。

例如，给父组件传递一个 `color` 属性：

<my-component :color="'red'"></my-component>

在子组件中可以这样接收：

import { defineComponent } from 'vue'

const MyComponent = defineComponent({
  setup(props, { attrs }) {
    console.log(attrs.color) // 输出 'red'
  }
})

注意：自定义属性不能和 Vue3 中内置的属性名重复，如 `key`、`ref` 等。