【掘金小册·Vue组件精讲-13】实战 6：可用 slot-scope 自定义列的表格组件——Table
上一节，我们基于 Render 函数实现了在表格中自定义列模板的组件 Table，虽说 Render 函数能够完全发挥 JavaScript 的编程能力，实现几乎所有的自定义工作，但本质上，使用者写的是一个庞大的 JS 对象，它不具备 DOM 结构，可读性和可维护性都比较差。对于大部分写 Vue.js 的开发者来说，更倾向于使用 templ ...
【掘金小册·Vue组件精讲-12】实战 5：可用 Render 自定义列的表格组件——Table
表格组件 Table 是中后台产品中最常用的组件之一，用于展示大量结构化的数据。大多数组件库都提供了表格组件，比如 iView，功能也是非常强大。正规的表格，是由 <table>、<thead>、<tbody>、<tr>、<th>、<td> 这些标签组成，一般分为表头 ...
【掘金小册·Vue组件精讲-11】更灵活的组件：Render 函数与 Functional Render
Vue.js 2.x 与 Vue.js 1.x 最大的区别就在于 2.x 使用了 Virtual DOM（虚拟 DOM）来更新 DOM 节点，提升渲染性能。 一般来说，我们写 Vue.js 组件，模板都是写在 <template> 内的，但它并不是最终呈现的内容，template 只是一种对开发者友好的语法，能够一眼 ...
【掘金小册·Vue组件精讲-10】实战 4：全局提示组件——$Alert
有一种 Vue.js 组件，它不同于常规的组件，但组件结构本身很简单，比如下面的全局提示组件： 实现这样一个组件并不难，只需要简单的几行 div 和 css，但使用者可能要这样来显示组件： <template> <div> <Alert v- ...
【掘金小册·Vue组件精讲-9】实战 3：动态渲染 .vue 文件的组件—— Display
你可能用过 jsfiddle 或 jsbin 之类的网站，在里面你可以用 CDN 的形式引入 Vue.js，然后在线写示例，实时运行，比如下面这个例子： jsfiddle.net/c87yh92v/ 不过，这类网站主要是一个 html，里面包含 js、css 部分，渲染侧是用 iframe ...
【掘金小册·Vue组件精讲-8】Vue 的构造器——extend 与手动挂载——$mount
本节介绍两个 Vue.js 内置但却不常用的 API——extend 和 $mount，它们经常一起使用。不常用，是因为在业务开发中，基本没有它们的用武之地，但在独立组件开发时，在一些特定的场景它们是至关重要的。 使用场景 我们在写 Vue.js 时，不论是用 CDN 的方式还是在 Webpack 里用 npm 引入的 Vue.js ...
【掘金小册·Vue组件精讲-7】实战 2：组合多选框组件——CheckboxGroup & Checkbox
在第 5 节，我们完成了具有数据校验功能的组件 Form，本小节继续开发一个新的组件——组合多选框 Checkbox。它作为基础组件，也能集成在 Form 内并应用其验证规则。 Checkbox 组件概览 多选框组件也是由两个组件组成：CheckboxGroup 和 Checkbox。单独使用时，只需要一个 Chec ...
【掘金小册·Vue组件精讲-6】组件的通信 3：找到任意组件实例——findComponents 系列方法
概述 前面的小节我们已经介绍了两种组件间通信的方法：provide / inject 和 dispatch / broadcast。它们有各自的使用场景和局限，比如前者多用于子组件获取父组件的状态，后者常用于父子组件间通过自定义事件通信。 本节将介绍第 3 种组件通信方法，也就是 findComponents 系列方法，它并非 Vue.js ...
【掘金小册·Vue组件精讲-5】实战 1：具有数据校验功能的表单组件——Form
在第 3 节和第 4 节中，我们介绍了组件间的两种通信方法：provide / inject 和 dispatch / broadcast，前者是 Vue.js 内置的，主要用于子组件获取父组件（包括跨级）的状态；后者是自行实现的一种混合，用于父子组件（包括跨级）间通过自定义事件通信。本小节则基于这两种通信方法，来实现一个具有数据校验功能的表单组件——Fo ...
【掘金小册·Vue组件精讲-4】组件的通信 2：派发与广播——自行实现 dispatch 和 broadcast 方法
上一讲的 provide / inject API 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。然后有两种场景它不能很好的解决： 父组件向子组件（支持跨级）传递数据； 子组件向父组件（支持跨级）传递数据。 这种父子（含跨级）传递数据的 ...