再也不用担心难学会 Vue3 了，这篇详细指南助你成为资深 Vue3 专家！

前端

2023-10-19 02:29:34

Vue 3 中的组件开发：Button 组件的深刻解析

父子组件通信

在 Vue 3 中，父子组件通信是通过三种主要机制实现的：

Props： 父组件通过 props 向子组件传递数据，子组件通过 props 接收数据。
Emit： 子组件通过 emit 触发事件，父组件通过 v-on 指令监听事件。
插槽： 父组件通过 slot 定义插槽，子组件通过 slot 指令将内容插入插槽。

隔代组件通信

隔代组件通信涉及祖先组件与孙子组件之间的交互，可以通过以下方式实现：

Provide： 祖先组件通过 provide 提供数据，子孙组件通过 inject 接收数据。

Button 组件实现

模板

Button 组件的模板包含：

<button> 元素：按钮的基本结构
<span> 元素：按钮文本
<i> 元素：可选的按钮图标

样式

Button 组件的样式包括：

按钮样式（形状、大小、颜色）
文本样式（颜色、大小、字体）
图标样式（颜色、大小）

逻辑

Button 组件的逻辑包括：

点击事件： 响应按钮点击。
状态控制： 管理按钮的不同状态（例如禁用、加载）。
类型控制： 提供不同类型的按钮（例如 primary、secondary）。

代码示例

<template>
  <button :type="type" :class="classes">
    <span>{{ text }}</span>
    <i v-if="icon" :class="icon"></i>
  </button>
</template>

<script>
export default {
  props: {
    type: {
      type: String,
      default: 'default'
    },
    text: {
      type: String,
      default: ''
    },
    icon: {
      type: String,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    classes() {
      return `button button--${this.type} ${this.disabled ? 'button--disabled' : ''}`
    }
  },
  methods: {
    handleClick() {
      this.$emit('click')
    }
  }
}
</script>