什麼是組件？
元件（Component）是 Vue.js 最強大的功能之一。元件可以擴充 HTML 元素，封裝可重複使用的程式碼。在較高層面上，元件是自訂元素，Vue.js 的編譯器為它添加特殊功能。在某些情況下，元件也可以是原生 HTML 元素的形式，以 is 特性擴充。
使用元件
註冊
之前說過，我們可以用Vue.extend() 創建一個組件構造器：
var MyComponent = Vue.extend({
// 选项...
})
這個構造器用作組件，需要用`ue , constructor)` **註冊** ：
// 全局注册组件，tag 为 my-component Vue.component('my-component', MyComponent)
對於自訂標籤名字，Vue.js 不強制要求遵循W3C 規則（小寫，並且包含一個短槓），儘管遵循這個規則比較好。
元件在註冊之後，便可以在父實例的模組中以自訂元素
<div id="example">
<my-component></my-component>
</div>
// 定义
var MyComponent = Vue.extend({
template: '<div>A custom component!</div>'
})
// 注册
Vue.component('my-component', MyComponent)
// 创建根实例
new Vue({
el: '#example'
})
渲染為：
<div id="example"> <div>A custom component!</div> </div>
組件的模板被替換了一個自訂元素，自訂元素的自訂元素，自訂元素的模板被替換為一個注意組件的模板被取代了一個功能。可以用實例選項 replace 決定是否要替換。
局部註冊
不需要全域註冊每個元件。可以讓元件只能用在其它元件內，用實例選項 components 註冊：
var Child = Vue.extend({ /* ... */ })
var Parent = Vue.extend({
template: '...',
components: {
// <my-component> 只能用在父组件模板内
'my-component': Child
}
})
這種封裝也適用於其它資源，如指令、過濾器和過渡。
註冊語法糖
為了讓事件更簡單，可以直接傳入選項物件而不是建構器給 Vue.component() 和 component 選項。 Vue.js 在背後自動呼叫Vue.extend()：
// 在一个步骤中扩展与注册
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})
// 局部注册也可以这么做
var Parent = Vue.extend({
components: {
'my-component': {
template: '<div>A custom component!</div>'
}
}
})
元件選項問題
傳入Vue 建構器的多數選項也可以用在Vue.extend() 中，不過有兩個特例： data 和el。試想如果我們簡單地把一個物件當作 data 選項傳給 Vue.extend()：
var data = { a: 1 }
var MyComponent = Vue.extend({
data: data
})
這麼做的問題是 `MyComponent` 所有的實例將共享同一個 `data` 物件！這基本上不是我們想要的，因此我們應該使用一個函數作為`data` 選項，讓這個函數回傳一個新物件：
var MyComponent = Vue.extend({
data: function () {
return { a: 1 }
}
})
同理，`el` 選項用在`Vue.extend() ` 中時也須是個函數。
模板解析
Vue 的模板是 DOM 模板，使用瀏覽器原生的解析器而不是自己實作一個。相較於字串模板，DOM 模板有一些好處，但也有問題，它必須是有效的 HTML 片段。有些 HTML 元素對什麼元素可以放在它裡面有限制。常見的限制：
•a 不能包含其它的互動元素（如按鈕，連結）
•ul 和ol 只能直接包含其它的互動元素（如按鈕，連結）
•ul 和ol 只能直接包含li
•select 只能包含option 和optgroup
•table 只能直接包含, tr, caption, col, colgroup
•tr 只能直接包含th 和td
<table> <tr is="my-component"></tr> </table>
`` 不能用在`` 內，這時應使用``，`
<table> <tbody v-for="item in items"> <tr>Even row</tr> <tr>Odd row</tr> </tbody> </table>
駝峰式槓式
Vue.component('child', {
// 声明 props
props: ['msg'],
// prop 可以用在模板内
// 可以用 `this.msg` 设置
template: '<span>{{ msg }}</span>'
})到一個表達式，也可以用v-bind 綁定動態Props 到父元件的資料。每當父組件的資料變化時，也會傳導給子組件：
Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})
<!-- kebab-case in HTML -->
<child my-message="hello!"></child>🎜🎜
使用 `v-bind` 的缩写语法通常更简单：
字面量语法 vs. 动态语法
初学者常犯的一个错误是使用字面量语法传递数值：
因为它是一个字面 prop，它的值以字符串 `”1”` 而不是以实际的数字传下去。如果想传递一个实际的 JavaScript 数字，需要使用动态语法，从而让它的值被当作 JavaScript 表达式计算：
Prop 绑定类型
prop 默认是单向绑定：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。不过，也可以使用 .sync 或 .once 绑定修饰符显式地强制双向或单次绑定：
比较语法：
<!-- 默认为单向绑定 --> <child :msg="parentMsg"></child> <!-- 双向绑定 --> <child :msg.sync="parentMsg"></child> <!-- 单次绑定 --> <child :msg.once="parentMsg"></child>
双向绑定会把子组件的 msg 属性同步回父组件的 parentMsg 属性。单次绑定在建立之后不会同步之后的变化。
注意如果 prop 是一个对象或数组，是按引用传递。在子组件内修改它会影响父组件的状态，不管是使用哪种绑定类型。
Prop 验证
组件可以为 props 指定验证要求。当组件给其他人使用时这很有用，因为这些验证要求构成了组件的 API，确保其他人正确地使用组件。此时 props 的值是一个对象，包含验证要求：
Vue.component('example', {
props: {
// 基础类型检测 （`null` 意思是任何类型都可以）
propA: Number,
// 多种类型 (1.0.21+)
propM: [String, Number],
// 必需且是字符串
propB: {
type: String,
required: true
},
// 数字，有默认值
propC: {
type: Number,
default: 100
},
// 对象/数组的默认值应当由一个函数返回
propD: {
type: Object,
default: function () {
return { msg: 'hello' }
}
},
// 指定这个 prop 为双向绑定
// 如果绑定类型不对将抛出一条警告
propE: {
twoWay: true
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
},
// 转换函数（1.0.12 新增）
// 在设置值之前转换值
propG: {
coerce: function (val) {
return val + '' // 将值转换为字符串
}
},
propH: {
coerce: function (val) {
return JSON.parse(val) // 将 JSON 字符串转换为对象
}
}
}
})
type 可以是下面原生构造器：
•String
•Number
•Boolean
•Function
•Object
•Array
type 也可以是一个自定义构造器，使用 instanceof 检测。
当 prop 验证失败了，Vue 将拒绝在子组件上设置此值，如果使用的是开发版本会抛出一条警告。
父子组件通信
父链
子组件可以用 this.$parent 访问它的父组件。根实例的后代可以用 this.$root 访问它。父组件有一个数组 this.$children，包含它所有的子元素。
尽管可以访问父链上任意的实例，不过子组件应当避免直接依赖父组件的数据，尽量显式地使用 props 传递数据。另外，在子组件中修改父组件的状态是非常糟糕的做法，因为：
1.这让父组件与子组件紧密地耦合；
2.只看父组件，很难理解父组件的状态。因为它可能被任意子组件修改！理想情况下，只有组件自己能修改它的状态。
自定义事件
Vue 实例实现了一个自定义事件接口，用于在组件树中通信。这个事件系统独立于原生 DOM 事件，用法也不同。
每个 Vue 实例都是一个事件触发器：
•使用 $on() 监听事件；
•使用 $emit() 在它上面触发事件；
•使用 $dispatch() 派发事件，事件沿着父链冒泡；
•使用 $broadcast() 广播事件，事件向下传导给所有的后代。
不同于 DOM 事件，Vue 事件在冒泡过程中第一次触发回调之后自动停止冒泡，除非回调明确返回 true。
简单例子：
<!-- 子组件模板 -->
<template id="child-template">
<input v-model="msg">
<button v-on:click="notify">Dispatch Event</button>
</template>
<!-- 父组件模板 -->
<div id="events-example">
<p>Messages: {{ messages | json }}</p>
<child></child>
</div>
// 注册子组件
// 将当前消息派发出去
Vue.component('child', {
template: '#child-template',
data: function () {
return { msg: 'hello' }
},
methods: {
notify: function () {
if (this.msg.trim()) {
this.$dispatch('child-msg', this.msg)
this.msg = ''
}
}
}
})
// 初始化父组件
// 将收到消息时将事件推入一个数组
var parent = new Vue({
el: '#events-example',
data: {
messages: []
},
// 在创建实例时 `events` 选项简单地调用 `$on`
events: {
'child-msg': function (msg) {
// 事件回调内的 `this` 自动绑定到注册它的实例上
this.messages.push(msg)
}
}
})
使用 v-on 绑定自定义事件
上例非常好，不过从父组件的代码中不能直观的看到 "child-msg" 事件来自哪里。如果我们在模板中子组件用到的地方声明事件处理器会更好。为此子组件可以用 v-on 监听自定义事件：
这样就很清楚了：当子组件触发了 `”child-msg”` 事件，父组件的 `handleIt` 方法将被调用。所有影响父组件状态的代码放到父组件的 `handleIt` 方法中；子组件只关注触发事件。
子组件索引
尽管有 props 和 events，但是有时仍然需要在 JavaScript 中直接访问子组件。为此可以使用 v-ref 为子组件指定一个索引 ID。例如：
<div id="parent">
<user-profile v-ref:profile></user-profile>
</div>
var parent = new Vue({ el: '#parent' })
// 访问子组件
var child = parent.$refs.profile
v-ref 和 v-for 一起用时，ref 是一个数组或对象，包含相应的子组件。
使用 Slot 分发内容
在使用组件时，常常要像这样组合它们：
<app> <app-header></app-header> <app-footer></app-footer> </app>
注意两点：
1.
2.
为了让组件可以组合，我们需要一种方式来混合父组件的内容与子组件自己的模板。这个处理称为内容分发（或 “transclusion”，如果你熟悉 Angular）。Vue.js 实现了一个内容分发 API，参照了当前 Web 组件规范草稿，使用特殊的
编译作用域
在深入内容分发 API 之前，我们先明确内容的编译作用域。假定模板为：
{{ msg }}
msg 应该绑定到父组件的数据，还是绑定到子组件的数据？答案是父组件。组件作用域简单地说是：
父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译
一个常见错误是试图在父组件模板内将一个指令绑定到子组件的属性/方法：
假定 someChildProperty 是子组件的属性，上例不会如预期那样工作。父组件模板不应该知道子组件的状态。
如果要绑定子组件内的指令到一个组件的根节点，应当在它的模板内这么做：
Vue.component('child-component', {
// 有效，因为是在正确的作用域内
template: '<div v-show="someChildProperty">Child</div>',
data: function () {
return {
someChildProperty: true
}
}
})
类似地，分发内容是在父组件作用域内编译。
单个 Slot
父组件的内容将被抛弃，除非子组件模板包含
假定 my-component 组件有下面模板：
<div> <h1>This is my component!</h1> <slot> 如果没有分发内容则显示我。 </slot> </div>
父组件模板： This is some original content This is some more original content
渲染结果：
<div> <h1>This is my component!</h1> <p>This is some original content</p> <p>This is some more original content</p> </div>
具名 Slot
仍然可以有一个匿名 slot，它是默认 slot，作为找不到匹配的内容片段的回退插槽。如果没有默认的 slot，这些找不到匹配的内容片段将被抛弃。
例如，假定我们有一个 multi-insertion 组件，它的模板为：
<div> <slot name="one"></slot> <slot></slot> <slot name="two"></slot> </div>
父组件模板：
<multi-insertion> <p slot="one">One</p> <p slot="two">Two</p> <p>Default A</p> </multi-insertion>
渲染结果为：
<div> <p slot="one">One</p> <p>Default A</p> <p slot="two">Two</p> </div>
在组合组件时，内容分发 API 是非常有用的机制。
动态组件
多个组件可以使用同一个挂载点，然后动态地在它们之间切换。使用保留的
new Vue({
el: 'body',
data: {
currentView: 'home'
},
components: {
home: { /* ... */ },
posts: { /* ... */ },
archive: { /* ... */ }
}
})
<component :is="currentView">
<!-- 组件在 vm.currentview 变化时改变 -->
</component>
keep-alive
如果把切换出去的组件保留在内存中，可以保留它的状态或避免重新渲染。为此可以添加一个 keep-alive 指令参数：
activate 钩子
在切换组件时，切入组件在切入前可能需要进行一些异步操作。为了控制组件切换时长，给切入组件添加 activate 钩子：
Vue.component('activate-example', {
activate: function (done) {
var self = this
loadDataAsync(function (data) {
self.someData = data
done()
})
}
})
注意 `activate` 钩子只作用于动态组件切换或静态组件初始化渲染的过程中，不作用于使用实例方法手工插入的过程中。
transition-mode
transition-mode 特性用于指定两个动态组件之间如何过渡。
在默认情况下，进入与离开平滑地过渡。这个特性可以指定另外两种模式：
•in-out：新组件先过渡进入，等它的过渡完成之后当前组件过渡出去。
•out-in：当前组件先过渡出去，等它的过渡完成之后新组件过渡进入。
示例：
<!-- 先淡出再淡入 -->
<component
:is="view"
transition="fade"
transition-mode="out-in">
</component>
.fade-transition {
transition: opacity .3s ease;
}
.fade-enter, .fade-leave {
opacity: 0;
}
杂项
组件和 v-for
自定义组件可以像普通元素一样直接使用 v-for：
但是，不能传递数据给组件，因为组件的作用域是孤立的。为了传递数据给组件，应当使用 props：
:item="item"
:index="$index">
不自动把 item 注入组件的原因是这会导致组件跟当前 v-for 紧密耦合。显式声明数据来自哪里可以让组件复用在其它地方。
编写可复用组件
在编写组件时，记住是否要复用组件有好处。一次性组件跟其它组件紧密耦合没关系，但是可复用组件应当定义一个清晰的公开接口。
Vue.js 组件 API 来自三部分——prop，事件和 slot：
•prop 允许外部环境传递数据给组件；
•事件 允许组件触发外部环境的 action；
•slot 允许外部环境插入内容到组件的视图结构内。
使用 v-bind 和 v-on 的简写语法，模板的缩进清楚且简洁：
:bar="qux"
@event-a="doThis"
@event-b="doThat">
Hello!
异步组件
在大型应用中，我们可能需要将应用拆分为小块，只在需要时才从服务器下载。为了让事情更简单，Vue.js 允许将组件定义为一个工厂函数，动态地解析组件的定义。Vue.js 只在组件需要渲染时触发工厂函数，并且把结果缓存起来，用于后面的再次渲染。例如：
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
resolve({
template: '<div>I am async!</div>'
})
}, 1000)
})
工厂函数接收一个 resolve 回调，在收到从服务器下载的组件定义时调用。也可以调用 reject(reason) 指示加载失败。这里 setTimeout 只是为了演示。怎么获取组件完全由你决定。推荐配合使用 Webpack 的代码分割功能：
Vue.component('async-webpack-example', function (resolve) {
// 这个特殊的 require 语法告诉 webpack
// 自动将编译后的代码分割成不同的块，
// 这些块将通过 ajax 请求自动下载。
require(['./my-async-component'], resolve)
})
资源命名约定
一些资源，如组件和指令，是以 HTML 特性或 HTML 自定义元素的形式出现在模板中。因为 HTML 特性的名字和标签的名字不区分大小写，所以资源的名字通常需使用 kebab-case 而不是 camelCase 的形式，这不大方便。
Vue.js 支持资源的名字使用 camelCase 或 PascalCase 的形式，并且在模板中自动将它们转为 kebab-case（类似于 prop 的命名约定）：
// 在组件定义中
components: {
// 使用 camelCase 形式注册
myComponent: { /*... */ }
}
<!-- 在模板中使用 kebab-case 形式 -->
<my-component></my-component>
ES6 对象字面量缩写 也没问题：
// PascalCase
import TextBox from './components/text-box';
import DropdownMenu from './components/dropdown-menu';
export default {
components: {
// 在模板中写作 <text-box> 和 <dropdown-menu>
TextBox,
DropdownMenu
}
}
递归组件
组件在它的模板内可以递归地调用自己，不过，只有当它有 name 选项时才可以：
var StackOverflow = Vue.extend({
name: 'stack-overflow',
template:
'<div>' +
// 递归地调用它自己
'<stack-overflow></stack-overflow>' +
'</div>'
})
上面组件会导致一个错误 “max stack size exceeded”，所以要确保递归调用有终止条件。当使用 Vue.component() 全局注册一个组件时，组件 ID 自动设置为组件的 name 选项。
片断实例
在使用 template 选项时，模板的内容将替换实例的挂载元素。因而推荐模板的顶级元素始终是单个元素。
不这么写模板：
推荐这么写：
下面幾種情況會讓實例變成一個片斷實例：
1.模板包含多個頂層元素。
2.範本只包含普通文字。
3.模板只包含其它組件（其它組件可能是一個片段實例）。
4.模板只包含一個元素指令，如
5.模板根節點有一個流程控制指令，如 v-if 或 v-for。
這些情況讓實例有未知數量的頂級元素，它將把它的 DOM 內容當作片段。片段實例仍然會正確地渲染內容。不過，它沒有一個根節點，它的 $el 指向一個錨點節點，即一個空的文字節點（在開發模式下是一個註解節點）。
但是更重要的是，組件元素上的非流程控制指令，非prop 特性和過渡將被忽略，因為沒有根元素供綁定：
當然片斷實例有它的用處，不過通常給組件一個根節點比較好。它會確保元件元素上的指令和特性能正確地轉換，同時效能也稍微好一點。
內聯模板
如果子組件有 inline-template 特性，組件將把它的內容當作它的模板，而不是把它當作分發內容。這讓模板更靈活。
These are compiled as the component's own template Not parent's transclusion content. Not parent's transclusion content.
Not parent's transclusion content.
-template 讓模板的作用域難以理解，且無法快取模板編譯結果。最佳實務是使用 template 選項在元件內定義範本。 以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支PHP中文網。 更多Vue.js每天必學之組件與組件間的通信相關文章請關注PHP中文網！ 🎜
