Vue3: 定义组件Props

原创已于 2022-12-21 09:53:38 修改 · 2.8k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

于 2022-12-11 15:41:55 首次发布

vue3学习笔记专栏收录该内容

21 篇文章

订阅专栏

本文介绍了一个Vue组件ToolDrawer的实现方式，该组件通过props接收名称并展示在一个左侧分隔符中。文章展示了如何使用Vue 3的defineComponent定义组件，并提供了使用<script setup>和非<script setup>两种方式来定义props的方法。

<template>
  <div>
    <div><a-divider orientation="left">{{name}}</a-divider></div>
    <div>
      范德萨发
    </div>
  </div>
</template>

<script lang="ts">
  // 抽屉工具，支持8个或者是4个
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'ToolDrawer',
    props:{
      'name':{
        type:String,
        default : '未命名'
      }
    }
  });
</script>

官方文档

可以使用和vue2 一样的语法。

// 使用 <script setup>
defineProps({
  title: String,
  likes: Number
})
// 非 <script setup>
export default {
  props: {
    title: String,
    likes: Number
  }
}

类型说明

要声明对 props 的校验，你可以向 defineProps() 宏提供一个带有 props 校验选项的对象，例如：

defineProps({
  // 基础类型检查
  // （给出 `null` 和 `undefined` 值则会跳过任何类型检查）
  propA: Number,
  // 多种可能的类型
  propB: [String, Number],
  // 必传，且为 String 类型
  propC: {
    type: String,
    required: true
  },
  // Number 类型的默认值
  propD: {
    type: Number,
    default: 100
  },
  // 对象类型的默认值
  propE: {
    type: Object,
    // 对象或数组的默认值
    // 必须从一个工厂函数返回。
    // 该函数接收组件所接收到的原始 prop 作为参数。
    default(rawProps) {
      return { message: 'hello' }
    }
  },
  // 自定义类型校验函数
  propF: {
    validator(value) {
      // The value must match one of these strings
      return ['success', 'warning', 'danger'].includes(value)
    }
  },
  // 函数类型的默认值
  propG: {
    type: Function,
    // 不像对象或数组的默认，这不是一个工厂函数。这会是一个用来作为默认值的函数
    default() {
      return 'Default function'
    }
  }
})