Vue 3 道具 - Javascript

道具是 Vue 3 中的一个重要特性，可以用来在组件之间传递数据。道具（Props）是指从父组件中传递给子组件的数据。子组件可以通过道具来接收数据并使用它们。

如何声明道具

在 Vue 3 中，可以通过 props 选项来声明道具，例如以下的代码片段：

app.component('child-component', {
  props: {
    message: String // 声明了一个名为 message 的 String 类型的道具
  },
  template: `
    <div>
      <p>{{ message }}</p>
    </div>
  `
})

在这个示例中，我们创建了一个名为 child-component 的组件，并声明了一个道具：message。我们可以通过 v-bind 指令将数据传递给这个道具，例如：

<child-component message="Hello, World!"></child-component>

当父组件将数据传递给子组件时，子组件就可以使用这个数据了。

道具的类型

在声明道具时，可以指定道具的类型。Vue 3 支持以下几种数据类型：

• String
• Number
• Boolean
• Array
• Object
• Date
• Function
• Symbol

可以通过以下方式来指定道具的类型：

app.component('child-component', {
  props: {
    message: {
      type: String, // 指定道具的类型为 String
      required: true // 必需的道具，如果没有传递这个道具，将会收到一个警告
    }
  },
  template: `
    <div>
      <p>{{ message }}</p>
    </div>
  `
})

道具的默认值

如果父组件没有为道具传递值，则可以使用默认值。例如：

app.component('child-component', {
  props: {
    message: {
      type: String,
      required: true,
      default: 'Hello, World!' // 设置默认值为 'Hello, World!'
    }
  },
  template: `
    <div>
      <p>{{ message }}</p>
    </div>
  `
})

道具的验证

可以通过自定义验证器来验证道具的值。例如：

app.component('child-component', {
  props: {
    age: {
      type: Number,
      validator: (value) => {
        if (value < 18) {
          console.warn('Age must be at least 18.')
          return false
        }
        return true
      }
    }
  },
  template: `
    <div>
      <p>{{ age }}</p>
    </div>
  `
})

在这个示例中，我们为 age 道具设置了一个自定义验证器。如果该道具的值小于 18，则将会发出警告并返回 false。

小结

道具是 Vue 3 中传递数据的一种方法。可以通过道具来将数据从父组件传递到子组件，并在子组件中使用它们。我们可以指定道具的类型、默认值和验证器，以确保传递的数据是符合要求的。