【掘金小册·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 主要解决了跨级组件间的通信问题，不过它的使用场景，主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。然后有两种场景它不能很好的解决： 父组件向子组件（支持跨级）传递数据； 子组件向父组件（支持跨级）传递数据。 这种父子（含跨级）传递数据的 ...
【掘金小册·Vue组件精讲-3】组件的通信 1：provide & inject
上一节中我们说到，ref 和 $parent / $children 在跨级通信时是有弊端的。当组件 A 和组件 B 中间隔了数代（甚至不确定具体级别）时，以往会借助 Vuex 或 Bus 这样的解决方案，不得不引入三方库来支持。本小节则介绍一种无依赖的组件通信方法：Vue.js 内置的 provide / inject 接口。 ...
【掘金小册·Vue组件精讲-2】基础：Vue.js 组件的三个 API：prop、event、slot
如果您已经对 Vue.js 组件的基础用法了如指掌，可以跳过本小节，不过当做复习稍读一下也无妨。 组件的构成 一个再复杂的组件，都是由三部分组成的：prop、event、slot，它们构成了 Vue.js 组件的 API。如果你开发的是一个通用组件，那一定要事先设计好这三部分，因为组件一旦发布，后 ...