【2025最新】Vue.js零基础入门实战指南：你应该学习的vue组件化知识-CSDN博客

本文链接：https://blog.csdn.net/tang_is_learning/article/details/147640507

作者：唐叔在学习
专栏：唐叔学前端
关键词：#vue组件化开发 #组件系统 #vue入门 #前端开发
阅读建议：建议先学习vue核心基础语法篇章后再阅读本文，搭配代码实践效果更佳

大家好，我是唐叔！今天咱们来聊聊Vue.js中最核心的概念之一——组件系统。组件化开发是现代前端开发的基石，掌握了Vue组件，你就掌握了Vue开发的精髓。下面我就带大家从零开始，逐步深入Vue组件系统的世界。

一、什么是Vue组件？

简单来说，组件就是可以复用的Vue实例，它允许我们将UI拆分成独立、可复用的代码片段。就像搭积木一样，我们可以用各种组件拼装出完整的应用界面。

组件化的好处显而易见：

代码复用：一次编写，多处使用
维护方便：每个组件功能独立，便于维护
协作高效：不同开发者可以并行开发不同组件

二、组件的创建与使用

1. 全局组件注册

全局组件在任何Vue实例中都可以使用，通过Vue.component()方法注册：

// 定义一个名为button-counter的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button @click="count++">点击了 {{ count }} 次</button>'
})

// 使用组件
new Vue({
  el: '#app'
})

在HTML中使用：

<div id="app">
  <button-counter></button-counter>
  <button-counter></button-counter>
</div>

2. 局部组件注册

更常见的做法是在Vue实例中局部注册组件：

const ChildComponent = {
  template: '<div>我是子组件</div>'
}

new Vue({
  el: '#app',
  components: {
    'child-component': ChildComponent
  }
})

3. 单文件组件

在实际项目中，我们通常使用.vue单文件组件：

<!-- ButtonCounter.vue -->
<template>
  <button @click="count++">点击了 {{ count }} 次</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<style scoped>
button {
  background-color: #42b983;
  color: white;
}
</style>

然后在其他组件中导入使用：

import ButtonCounter from './ButtonCounter.vue'

export default {
  components: {
    ButtonCounter
  }
}

三、Props：父组件向子组件传递数据

Props是组件之间通信的重要方式，父组件通过props向子组件传递数据。

1. 基本用法

子组件中定义props：

Vue.component('blog-post', {
  props: ['title'],
  template: '<h3>{{ title }}</h3>'
})

父组件传递数据：

<blog-post title="我的第一篇博客"></blog-post>
<blog-post title="Vue组件系统详解"></blog-post>

2. Props验证

我们可以为props指定验证规则：

Vue.component('my-component', {
  props: {
    // 基础的类型检查
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 自定义验证函数
    propE: {
      validator: function (value) {
        return value > 10
      }
    }
  }
})

四、自定义事件：子组件向父组件通信

子组件可以通过$emit触发事件，父组件通过v-on监听这些事件。

1. 基本用法

子组件：

Vue.component('child-component', {
  template: `
    <button @click="$emit('enlarge-text', 0.1)">
      放大文字
    </button>
  `
})

父组件：

<div id="app">
  <div :style="{ fontSize: postFontSize + 'em' }">
    <child-component @enlarge-text="postFontSize += $event"></child-component>
  </div>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    postFontSize: 1
  }
})
</script>

2. 使用v-model实现双向绑定

我们可以使用自定义事件实现类似v-model的双向绑定：

子组件：

Vue.component('custom-input', {
  props: ['value'],
  template: `
    <input
      :value="value"
      @input="$emit('input', $event.target.value)"
    >
  `
})

父组件：

<custom-input v-model="searchText"></custom-input>

五、插槽（Slots）：内容分发

插槽允许我们在组件中预留位置，让父组件可以向这些位置插入内容。

1. 基本插槽

子组件：

Vue.component('alert-box', {
  template: `
    <div class="alert-box">
      <strong>注意！</strong>
      <slot></slot>
    </div>
  `
})

父组件：

<alert-box>
  这里是插槽内容，可以是任意HTML或组件
</alert-box>

2. 具名插槽

当需要多个插槽时，可以使用具名插槽：

子组件：

Vue.component('layout', {
  template: `
    <div class="container">
      <header>
        <slot name="header"></slot>
      </header>
      <main>
        <slot></slot>
      </main>
      <footer>
        <slot name="footer"></slot>
      </footer>
    </div>
  `
})

父组件：

<layout>
  <template v-slot:header>
    <h1>这里是头部</h1>
  </template>

  <p>这里是主要内容</p>

  <template v-slot:footer>
    <p>这里是页脚</p>
  </template>
</layout>

3. 作用域插槽

当插槽内容需要访问子组件中的数据时，可以使用作用域插槽：

子组件：

Vue.component('todo-list', {
  data() {
    return {
      todos: [
        { id: 1, text: '学习Vue' },
        { id: 2, text: '写博客' },
        { id: 3, text: '发布项目' }
      ]
    }
  },
  template: `
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        <slot :todo="todo"></slot>
      </li>
    </ul>
  `
})

父组件：

<todo-list>
  <template v-slot:default="slotProps">
    <span v-if="slotProps.todo.id === 1">✓</span>
    {{ slotProps.todo.text }}
  </template>
</todo-list>