Vue.js 组件系统 - Vue.js 完全学习指南

1. 组件基础

组件是Vue.js最强大的特性之一，它允许我们使用小型、独立和可复用的组件构建大型应用。


// 定义一个组件
const app = Vue.createApp({})

app.component('todo-item', {
    props: ['todo'],
    template: `
        <li>
            {{ todo.text }}
        </li>
    `
})

// 使用组件
<todo-item
    v-for="item in groceryList"
    :todo="item"
    :key="item.id"
></todo-item>

2. 组件注册

Vue.js提供了两种组件注册方式：全局注册和局部注册。


// 全局注册
app.component('my-component', {
    // 选项
})

// 局部注册
const ComponentA = {
    // 选项
}

const app = Vue.createApp({
    components: {
        'component-a': ComponentA
    }
})

3. Props

Props是父组件向子组件传递数据的方式。

Props示例


app.component('blog-post', {
    props: ['title', 'content'],
    template: `
        <div class="blog-post">
            <h3>{{ title }}</h3>
            <p>{{ content }}</p>
        </div>
    `
})

4. 事件处理

子组件可以通过事件向父组件通信。

事件处理示例


app.component('button-counter', {
    data() {
        return {
            count: 0
        }
    },
    template: `
        <button @click="count++">
            点击次数: {{ count }}
        </button>
    `
})

5. 插槽

插槽允许我们组合组件，实现更灵活的内容分发。

插槽示例

主要内容


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

6. 动态组件

Vue.js允许我们动态切换组件。

动态组件示例


const Home = {
    template: '<div>首页内容</div>'
}

const About = {
    template: '<div>关于页面</div>'
}

const app = Vue.createApp({
    data() {
        return {
            currentComponent: 'home'
        }
    },
    components: {
        Home,
        About
    }
})

7. 综合示例：待办事项列表

下面是一个使用组件构建的待办事项列表示例。

待办事项列表

总计: {{ todos.length }} 项已完成: {{ completedCount }} 项

组件设计原则

单一职责：每个组件应该只负责一个功能
可复用性：组件应该是可复用的
可维护性：组件应该易于维护和测试
可组合性：组件应该能够组合成更复杂的组件

练习

尝试创建一个用户评论组件，包含以下功能：

显示评论列表
添加新评论
删除评论
评论点赞功能