什么是组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。
使用组件
注册
注册一个全局组件，你可以使用 Vue.component(tagName, options)
运行结果：
A custom component!
局部注册
不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：
运行结果：
A child component!
如果把 child-component 只能用example-2中，不能放到其他的div中，如果把放到其他的div中就会报错。
DOM 模板解析说明
当使用 DOM 作为模版时 (例如，将 el 选项挂载到一个已存在的元素上), 你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素<ul>，<ol>，<table>，<select> 限制了能被它包裹的元素，而一些像 <option> 这样的元素只能出现在某些其它元素内部。
...
自定义组件 <my-row> 被认为是无效的内容，因此在渲染的时候会导致错误。变通的方案是使用特殊的 is 属性：
应当注意，如果您使用来自以下来源之一的字符串模板，这些限制将不适用：
<script type="text/x-template">JavaScript 内联模版字符串
.vue 组件
因此，有必要的话请使用字符串模版。
data 必须是函数
由于这三个组件共享了同一个 data，因此增加一个 counter 会影响所有组件！这不对。我们可以通过为每个组件返回全新的 data 对象来解决这个问题：
data: function () { //return data return { counter: 0 }} 现在每个 counter 都有它自己内部的状态了。
构成组件
在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。
Prop
使用prop传递数据
要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。
运行结果：
hello world!
camelCase vs. kebab-case
HTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名：
运行结果：
hello world message!
如果把child2中的 my-message 改为 myMessage，
错误提示：
动态 Prop
在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件
运行结果：
字面量语法 vs 动态语法
因为它是一个字面 prop，它的值是字符串 "1" 而不是 number。如果想传递一个实际的 number，需要使用 v-bind，从而让它的值被当作 JavaScript 表达式计算：
单向数据流
prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。
Prop 验证
我们可以为组件的 props 指定验证规格。如果传入的数据不符合规格，Vue 会发出警告。当组件给其他人使用时，这很有用。
要指定验证规格，需要用对象的形式，而不能用字符串数组：错误提示：
propA 类型是number，而我们传递给它的是个字符串，需要如下修改
// :prop-a 是 v-bind:prop-a的缩写
如果把prop-c去掉，格式如下
错误提示：
这是由于propC required: true 是必传的。
type 可以是下面原生构造器：
String
Number
Boolean
Function
Object
Array
Symbol
type 也可以是一个自定义构造器函数，使用 instanceof 检测。
当 prop 验证失败，Vue 会在抛出警告 (如果使用的是开发版本)。注意 props 会在组件实例创建之前进行校验，所以在 default 或 validator 函数里，诸如 data、computed 或 methods 等实例属性还无法使用。非 Prop 属性
所谓非 prop 属性，就是它可以直接传入组件，而不需要定义相应的 prop。
明确给组件定义 prop 是传参的推荐方式，但组件的作者并不总能预见到组件被使用的场景。所以，组件可以接收任意传入的属性，这些属性都会被添加到组件的根元素上。例如，第三方组件 bs-date-input，当它要和一个 Bootstrap 插件互操作时，需要在这个第三方组件的 input 上添加 data-3d-date-picker 属性，这时可以把属性直接添加到组件上 (不需要事先定义 prop)：添加属性 data-3d-date-picker="true" 之后，它会被自动添加到 bs-date-input 的根元素上
替换/覆盖现有的特性
运行结果：
对于多数特性来说，传递给组件的值会覆盖组件本身设定的值。即例如传递 type="large" 将会覆盖 type="date" 且有可能破坏该组件！索性我们对待 class 和 style 特性会更聪明一些，这两个特性的值都会做合并 (merge) 操作，让最终生成的值为：form-control date-picker-theme-dark。
源码：
社群品牌：
定位：寻找共好，共同学习，持续输出全栈技术社群业界荣誉：IT界的逻辑思维文化：输出是最好的学习方式官方公众号：全栈部落社群发起人：技术交流社区：全栈部落完整系列教程：
| 关注全栈部落官方公众号，每晚十点接收系列原创技术推送 |
|---|
 |