08 【Props 组件事件】

DSelegent

已于 2022-08-11 13:14:30 修改

阅读量1.3k

点赞数 1

分类专栏： vue3学习笔记文章标签： javascript typescript 前端

于 2022-08-08 22:34:23 首次发布

本文链接：https://blog.csdn.net/DSelegent/article/details/126237707

版权

本文详细介绍了Vue.js中组件的Props声明、Prop名字格式、使用对象绑定多个prop、Prop校验、Boolean类型转换、单向数据流原理，以及组件事件的触发与监听、事件参数、声明触发的事件、事件校验、组件使用原生事件和事件总线的实现。内容涵盖了从Props的基础用法到高级技巧，是Vue.js开发的重要参考资料。

摘要由CSDN通过智能技术生成

15.Props

15.1 Props 声明#

Props 是一种特别的 attributes，你可以在组件上声明注册。要传递给子组件内容，我们必须在组件的 props 列表上声明它。

<!-- BlogPost.vue -->
<script setup>
defineProps(['title'])
</script>

<template>
  <h4>{
  { title }}</h4>
</template>

defineProps 是一个仅 <script setup> 中可用的编译宏命令，并不需要显式地导入。声明的 props 会自动暴露给模板。defineProps 会返回一个对象，其中包含了可以传递给组件的所有 props：

const props = defineProps(['title'])
console.log(props.title)

TypeScript 用户请参考：为组件 props 标注类型

在没有使用 <script setup> 的组件中，props 必须以 props 选项的方式声明，props 对象会作为 setup() 函数的第一个参数被传入：

export default {
   
  props: ['title'],
  setup(props) {
   
    // setup() 接收 props 作为第一个参数
    console.log(props.title)
  }
}

注意传递给 defineProps() 的参数和提供给 props 选项的值是相同的，两种声明方式背后其实使用的都是 prop 选项。

除了使用字符串数组来声明 prop 外，还可以使用对象的形式：

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

对于以对象形式声明中的每个属性，key 是 prop 的名称，而值则是该 prop 预期类型的构造函数。比如，如果要求一个 prop 的值是 number 类型，则可使用 Number 构造函数作为其声明的值。

对象形式的 props 声明不仅可以一定程度上作为组件的文档，而且如果其他开发者在使用你的组件时传递了错误的类型，也会在浏览器控制台中抛出警告。我们将在本章节稍后进一步讨论有关 prop 校验的更多细节。

校验选项中的 type 可以是下列这些原生构造函数：

String

Number

Boolean

Array

Object

Date

Function

Symbol

另外，type 也可以是自定义的类或构造函数，Vue 将会通过 instanceof 来检查类型是否匹配。

如果你正在搭配 TypeScript 使用 <script setup>，也可以使用类型标注来声明 props：

<script setup lang="ts">
defineProps<{
   
  title?: string
  likes?: number
}>()
</script>

更多关于基于类型的声明的细节请参考组件 props 类型标注。

15.2 Prop 名字格式#

如果一个 prop 的名字很长，应使用 camelCase 形式，因为它们是合法的 JavaScript 标识符，可以直接在模板的表达式中使用，也可以避免在作为属性 key 名时必须加上引号。

defineProps({
   
  greetingMessage: String
})
<span>{
   {
    greetingMessage }}</span>

虽然理论上你也可以在向子组件传递 props 时使用 camelCase 形式 (使用 DOM 模板时例外)，但实际上为了和 HTML attribute 对齐，我们通常会将其写为 kebab-case 形式：

<MyComponent greeting-message="hello" />

对于组件名我们推荐使用 PascalCase，因为这提高了模板的可读性，能帮助我们区分 Vue 组件和原生 HTML 元素。然而对于传递 props 来说，使用 camelCase 并没有太多优势，因此我们推荐更贴近 HTML 的书写风格。

15.3 使用一个对象绑定多个 prop#

如果你想要将一个对象的所有属性都当作 props 传入，你可以使用没有参数的 v-bind，即只使用 v-bind 而非 :prop-name。例如，这里有一个 post 对象：

const post = {
   
  id: 1,
  title: 'My Journey with Vue'
}

以及下面的模板：

<BlogPost v-bind="post" />

而这实际上等价于：

<BlogPost :id="post.id" :title="post.title" />

15.4 Prop 校验#

Vue 组件可以更细致地声明对传入的 props 的校验要求。比如我们上面已经看到过的类型声明，如果传入的值不满足类型要求，Vue 会在浏览器控制台中抛出警告来提醒使用者。这在开发给其他开发者使用的组件时非常有用。

要声明对 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',