一本让你醍醐灌顶的小册：《Vue.js 组件精讲》

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

这是一个创建于 2162 天前的主题，其中的信息可能已经有所发展或是发生改变。

三年前，我开始接触 Vue.js 框架，当时就被它的轻量、组件化和友好的 API 所吸引。与此同时，我也开源了 iView 项目。三年的磨(cǎi )砺(kēng)，沉淀了不少关于 Vue.js 组件的经验，于是乎，将 Vue.js 最精髓的内容，编写了一本掘金小册 《 Vue.js 组件精讲》 。本小册的内容也许不会让你的技术一夜间突飞猛进，但绝对使你醍醐灌顶。

全网的 Vue.js 文章已经足够多了，不妨来看看这本不一样的小册吧。

👉👉 小册购买地址 👈👈

↓↓↓↓↓以下内容摘自我的掘金小册↓↓↓↓↓

小册介绍

Vue.js 无疑是前端最热门的框架之一，而 Vue.js 最精髓的，正是它的组件。写一个 Vue 工程，也就是在写一个个的组件。换言之，学好了 Vue.js 的组件，也就能很好的驾驭 Vue.js 框架和千变万化的复杂业务场景。

如今，关于 Vue.js 的教程已经非常丰富，大部分开发者阅读文档后，都可以很快上手 Vue.js 的开发，而写好每一个组件，成了当前众多开发者的一个难题。

Vue.js 的组件和组件化在使用中有非常多的技巧和最佳实践，本小册则针对 Vue.js 最核心的部分—组件，来深入讲解，带着完整示例来解决一个个与组件相关的疑难点和知识点。

同时，作为 Vue.js 知名组件库 iView 的作者，深入开发超过 50 个极其复杂的通用组件，包含了 Vue.js 组件的各个场景，对 Vue.js 的组件开发，有着独树一帜的见解和经验。

作者介绍

Aresn，基于 Vue.js 的开源 UI 组件库 — iView 的作者（ GitHub 超过 18000 星）。现担任大数据公司 TalkingData 前端架构师。畅销书籍《 Vue.js 实战》的作者（ Vue.js 作者尤雨溪作序，销量超 3 万册）。在掘金发表众多关于 Vue.js 的技术文章，获得点赞 7000+，阅读 24 万+。更多介绍可以阅读文章《 2016 我的心路历程：从 Vue 到 Webpack 到 iView 》。

你会学到什么？

了解 Vue.js 组件开发的精华
Vue.js 组件知识全覆盖
掌握多种 Vue.js 组件开发的模式
独立组件不依赖 Vuex 和 Bus 情况下，各种跨级通信手段（ provide / inject、broadcast / dispatch、findComponents 系列）
7 个完整的 Vue.js 组件示例
如何做好一个开源项目
Vue.js 容易忽略的 API 详解
Vue.js 面试、常见问题答疑

小册的内容

因为本小册是围绕 Vue.js 组件展开的，所以第二节会讲解 Vue.js 组件的三个 API：prop、event、slot，当然，如果你已经开发过一些独立组件，完全可以跳过这节内容。

3 - 7 小节会介绍组件间通信的一些方法和黑科技，一部分是 Vue.js 内置的，一部分是自行实现的，在实际开发中，会非常实用。同时也利用这些方法完成了两个具体的实战案例：

具有数据校验功能的表单组件 —— Form ；
组合多选框组件 —— CheckboxGroup & Checkbox。

本小册都会以这种核心科技 + 对应实战的形式展开。

8 - 10 小节介绍 Vue 的构造器 extend 和手动挂载组件 $mount 的用法及案例。Vue.js 除了我们正常 new Vue() 外，还可以手动挂载的，这 3 节将介绍手动挂载一个 Vue 组件的使用场景。其中涉及到两个案例：

动态渲染 .vue 文件的组件 —— Display ；
全局通知组件 —— $Alert。

Display 组件用于将 .vue 文件渲染出来，线上的案例是 iView Run，它不需要你重新编译项目，就可以渲染一个标准的 Vue.js 组件。

$Alert 是全局的通知组件，它的调用方法不同于常规组件。常规组件使用方法形如：

<template>
    <Alert content="通知内容" :duration="3"></Alert>
</template>
<script>
    import Alert from '../components/alert.vue';
    
    export default {
        components: { Alert }
    }
</script>

而 $Alert 的调用更接近 JS 语法：

export default {
    methods: {
        showMessage () {
            this.$Alert({
                content: '通知内容',
                duration: 3
            });
        }
    }
}

虽然与常规 Vue 组件调用方式不同，但底层仍然由 Vue 组件构成和维护。

11 - 12 小节介绍 Render 函数与 Functional Render，并完成一个能够渲染自定义列的 Table 组件。Render 函数也是 Vue.js 组件重要的一部分，只不过在大多数业务中不常使用。本小节会介绍它的使用场景。

13 小节介绍作用域 slot （ slot-scope ），并基于这种方法同样实现 Table 组件。slot 用的很多，但 slot-scope 在业务中并不常用，但在一些特定场景下，比如组件内部有循环体时，会非常实用。

14 - 15 小节介绍递归组件，并完成树形控件 —— Tree。

16 - 19 小节是综合拓展，会着重讲解 Vue.js 容易忽略却很重要的 API，以及对 Vue.js 面试题的详细分析。除此之外，还会总结笔者在两年的 iView 开源经历中的经验，除了技术细节外，还包括开源项目的持续性发展、推广等。