深入浅出，详解 Vue 组件三大核心概念

2024-02-16 19:35:19

在 Vue.js 的组件化开发中，属性 (Prop)、事件 (Event) 和插槽 (Slot) 扮演着不可或缺的角色，它们如同组件的灵魂，赋予组件交互性、可定制性和重用性。深入理解这三大概念，是掌握 Vue.js 组件开发的关键。

属性 (Prop)

Prop 是组件与父组件之间进行通信的桥梁。它允许父组件将数据或状态传递给子组件，从而控制子组件的行为。Prop 可以是任何 JavaScript 数据类型，包括基本类型 (string、number 等) 和复杂类型 (数组、对象等)。

在定义 Prop 时，需要指定其类型、是否必填以及默认值。例如：

export default {
  props: {
    title: {
      type: String,
      required: true,
      default: '默认标题'
    },
    counter: {
      type: Number,
      default: 0
    }
  }
}

在子组件中，通过 props 对象访问这些 Prop：

<template>
  <h1>{{ props.title }}</h1>
</template>

事件 (Event)

事件是组件与外部世界交互的窗口。它允许组件向父组件或其他组件发送消息，触发特定操作或事件。事件通常由用户交互触发，例如点击按钮、输入表单等。

在定义事件时，需要指定其名称和参数列表。例如：

export default {
  events: {
    'on-click': function(data) {
      // 触发点击事件时执行的操作
    },
    'on-input': function(value) {
      // 触发输入事件时执行的操作
    }
  }
}

在父组件中，通过 v-on 指令监听这些事件：

<template>
  <my-component @on-click="handleButtonClick"></my-component>
</template>

<script>
export default {
  methods: {
    handleButtonClick(data) {
      // 处理点击事件
    }
  }
}
</script>

插槽 (Slot)

插槽是 Vue.js 中一个强大的特性，它允许组件在不同位置插入自定义内容。通过插槽，父组件可以将数据或组件动态地嵌入子组件的指定区域。

在定义插槽时，需要指定其名称和作用域。例如：

<template>
  <div>
    <slot name="header"></slot>
    <slot name="content"></slot>
  </div>
</template>

在父组件中，通过 <template> 或 <slot> 标签向插槽注入内容：

<template>
  <my-component>
    <template v-slot:header>
      <h1>我的标题</h1>
    </template>
    <template v-slot:content>
      <p>我的内容</p>
    </template>
  </my-component>
</template>