文档_Vue02_事件处理_表单双向绑定_组件_Prop_自定义事件_插槽_动态与异步组件
Vue.js_官方文档学习笔记_Part_02
事件处理
监听事件
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码。
示例：
<div id="example-1"> <button v-on:click="counter += 1">Add 1</button> <p>The button above has been clicked {{ counter }} times.</p> </div> |
var example1 = new Vue({ el: '#example-1', data: { counter: 0 } }) |
结果：
The button above has been clicked 0 times.
事件处理方法
然而许多事件处理逻辑会更为复杂，所以直接把 JavaScript 代码写在 v-on 指令中是不可行的。
因此 v-on 还可以接收一个需要调用的方法名称。
示例：
<div id="example-2"> <!-- `greet` 是在下面定义的方法名 --> <button v-on:click="greet">Greet</button> </div> |
var example2 = new Vue({ el: '#example-2', data: { name: 'Vue.js' }, // 在 `methods` 对象中定义方法 methods: { greet: function (event) { // `this` 在方法里指向当前 Vue 实例 alert('Hello ' + this.name + '!') // `event` 是原生 DOM 事件 if (event) { alert(event.target.tagName) } } } }) // 也可以用 JavaScript 直接调用方法 example2.greet() // => 'Hello Vue.js!' |
结果：
内联处理器中的方法
除了直接绑定到一个方法，也可以在内联 JavaScript 语句中调用方法：
<div id="example-3"> <button v-on:click="say('hi')">Say hi</button> <button v-on:click="say('what')">Say what</button> </div> |
new Vue({ el: '#example-3', methods: { say: function (message) { alert(message) } } }) |
结果：
有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法：
<button v-on:click="warn('Form cannot be submitted yet.', $event)"> Submit </button> |
// ... methods: { warn: function (message, event) { // 现在我们可以访问原生事件对象 if (event) event.preventDefault() alert(message) } } |
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，而不是去处理 DOM 事件细节。
为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。
之前提过，修饰符是由点开头的指令后缀来表示的。
.stop.prevent.capture.self.once
<!-- 阻止单击事件继续传播 --> <a v-on:click.stop="doThis"></a> <!-- 提交事件不再重载页面 --> <form v-on:submit.prevent="onSubmit"></form> <!-- 修饰符可以串联 --> <a v-on:click.stop.prevent="doThat"></a> <!-- 只有修饰符 --> <form v-on:submit.prevent></form> <!-- 添加事件监听器时使用事件捕获模式 --> <!-- 即元素自身触发的事件先在此处处理，然后才交由内部元素进行处理 --> <div v-on:click.capture="doThis">...</div> <!-- 只当在 event.target 是当前元素自身时触发处理函数 --> <!-- 即事件不是从内部元素触发的 --> <div v-on:click.self="doThat">...</div> |
使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。
2.1.4 新增
<!-- 点击事件将只会触发一次 --> <a v-on:click.once="doThis"></a> |
不像其它只能对原生的 DOM 事件起作用的修饰符，.once 修饰符还能被用到自定义的组件事件上。
如果你还没有阅读关于组件的文档，现在大可不必担心。
2.3.0 新增
Vue 还对应 addEventListener 中的 passive 选项提供了 .passive 修饰符。
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 --> <!-- 而不会等待 `onScroll` 完成 --> <!-- 这其中包含 `event.preventDefault()` 的情况 --> <div v-on:scroll.passive="onScroll">...</div> |
这个 .passive 修饰符尤其能够提升移动端的性能。
不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。
按键修饰符
在监听键盘事件时，我们经常需要检查常见的键值。
Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：
<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` --> <input v-on:keyup.13="submit"> |
记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：
<!-- 同上 --> <input v-on:keyup.enter="submit"> <!-- 缩写语法 --> <input @keyup.enter="submit"> |
全部的按键别名：
.enter.tab.delete(捕获“删除”和“退格”键).esc.space.up.down.left.right
可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 `v-on:keyup.f1` Vue.config.keyCodes.f1 = 112 |
自动匹配按键修饰符
2.5.0 新增
你也可直接将 KeyboardEvent.key 暴露的任意有效按键名转换为 kebab-case 来作为修饰符：
<input @keyup.page-down="onPageDown">
|
在上面的例子中，处理函数仅在 $event.key === 'PageDown' 时被调用。
有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，它们的内置别名应该是首选。
系统修饰键
2.1.0 新增
可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl.alt.shift.meta
注意：
在 Mac 系统键盘上，meta 对应 command 键 (⌘)。
在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。
在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。
在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。
在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。
例如：
<!-- Alt + C --> <input @keyup.alt.67="clear"> <!-- Ctrl + Click --> <div @click.ctrl="doSomething">Do something</div> |
请注意修饰键与常规按键不同，在和 keyup 事件一起用时，事件触发时修饰键必须处于按下状态。换句话说，只有在按住 ctrl 的情况下释放其它按键，才能触发 keyup.ctrl。而单单释放 ctrl 也不会触发事件。如果你想要这样的行为，请为 ctrl 换用 keyCode：keyup.17。
.exact 修饰符
2.5.0 新增
.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 --> <button @click.ctrl="onClick">A</button> <!-- 有且只有 Ctrl 被按下的时候才触发 --> <button @click.ctrl.exact="onCtrlClick">A</button> <!-- 没有任何系统修饰符被按下的时候才触发 --> <button @click.exact="onClick">A</button> |
鼠标按钮修饰符
2.2.0 新增
.left.right.middle
这些修饰符会限制处理函数仅响应特定的鼠标按钮。
为什么在 HTML 中监听事件?
你可能注意到这种事件监听的方式违背了关注点分离 (separation of concern) 这个长期以来的优良传统。
但不必担心，因为所有的 Vue.js 事件处理方法和表达式都严格绑定在当前视图的 ViewModel 上，它不会导致任何维护上的困难。
实际上，使用 v-on 有几个好处：
扫一眼 HTML 模板便能轻松定位在 JavaScript 代码里对应的方法。
因为你无须在 JavaScript 里手动绑定事件，你的 ViewModel 代码可以是非常纯粹的逻辑，和 DOM 完全解耦，更易于测试。
当一个 ViewModel 被销毁时，所有的事件处理器都会自动被删除。你无须担心如何自己清理它们。
表单输入绑定
基础用法
你可以用 v-model 指令在表单 <input> 及 <textarea> 元素上创建双向数据绑定。
它会根据控件类型自动选取正确的方法来更新元素。
尽管有些神奇，但 v-model 本质上不过是语法糖。
它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。
v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data选项中声明初始值。
对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。
文本
<input v-model="message" placeholder="edit me"> <p>Message is: {{ message }}</p> |
Message is:
多行文本
<span>Multiline message is:</span> <p style="white-space: pre-line;">{{ message }}</p> <br> <textarea v-model="message" placeholder="add multiple lines"></textarea> |
在文本区域插值 (<textarea></textarea>) 并不会生效，应用 v-model 来代替。
复选框
单个复选框，绑定到布尔值：
<input type="checkbox" id="checkbox" v-model="checked"> <label for="checkbox">{{ checked }}</label> |
多个复选框，绑定到同一个数组：
<div id='example-3'> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <label for="jack">Jack</label> <input type="checkbox" id="john" value="John" v-model="checkedNames"> <label for="john">John</label> <input type="checkbox" id="mike" value="Mike" v-model="checkedNames"> <label for="mike">Mike</label> <br> <span>Checked names: {{ checkedNames }}</span> </div> |
new Vue({ el: '#example-3', data: { checkedNames: [] } }) |
单选按钮
<div id="example-4"> <input type="radio" id="one" value="One" v-model="picked"> <label for="one">One</label> <br> <input type="radio" id="two" value="Two" v-model="picked"> <label for="two">Two</label> <br> <span>Picked: {{ picked }}</span> </div> |
new Vue({ el: '#example-4', data: { picked: '' } }) |
选择框
单选时：
<div id="example-5"> <select v-model="selected"> <option disabled value="">请选择</option> <option>A</option> <option>B</option> <option>C</option> </select> <span>Selected: {{ selected }}</span> </div> |
new Vue({ el: '...', data: { selected: '' } }) |
如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。
多选时 (绑定到一个数组)：
<div id="example-6"> <select v-model="selected" multiple style="width: 50px;"> <option>A</option> <option>B</option> <option>C</option> </select> <br> <span>Selected: {{ selected }}</span> </div> |
new Vue({ el: '#example-6', data: { selected: [] } }) |
用 v-for 渲染的动态选项：
<select v-model="selected"> <option v-for="option in options" v-bind:value="option.value"> {{ option.text }} </option> </select> <span>Selected: {{ selected }}</span> |
new Vue({ el: '...', data: { selected: 'A', options: [ { text: 'One', value: 'A' }, { text: 'Two', value: 'B' }, { text: 'Three', value: 'C' } ] } }) |
值绑定
对于单选按钮，复选框及选择框的选项，v-model 绑定的值通常是静态字符串 (对于复选框也可以是布尔值)：
<!-- 当选中时，`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false --> <input type="checkbox" v-model="toggle"> <!-- 当选中第一个选项时，`selected` 为字符串 "abc" --> <select v-model="selected"> <option value="abc">ABC</option> </select> |
但是有时我们可能想把值绑定到 Vue 实例的一个动态属性上，这时可以用 v-bind 实现，并且这个属性的值可以不是字符串。
复选框
<input type="checkbox" v-model="toggle" true-value="yes" false-value="no" > |
// 当选中时 vm.toggle === 'yes' // 当没有选中时 vm.toggle === 'no' |
这里的 true-value 和 false-value 特性并不会影响输入控件的 value 特性，因为浏览器在提交表单时并不会包含未被选中的复选框。如果要确保表单中这两个值中的一个能够被提交，(比如“yes”或“no”)，请换用单选按钮。
单选按钮
<input type="radio" v-model="pick" v-bind:value="a">
|
// 当选中时 vm.pick === vm.a |
选择框的选项
<select v-model="selected"> <!-- 内联对象字面量 --> <option v-bind:value="{ number: 123 }">123</option> </select> |
// 当选中时 typeof vm.selected // => 'object' vm.selected.number // => 123 |
修饰符
.lazy
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步 (除了上述输入法组合文字时)。
你可以添加 lazy 修饰符，从而转变为使用 change 事件进行同步：
<!-- 在“change”时而非“input”时更新 --> <input v-model.lazy="msg" > |
.number
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：
<input v-model.number="age" type="number">
|
这通常很有用，因为即使在 type="number" 时，HTML 输入元素的值也总会返回字符串。
.trim
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：
<input v-model.trim="msg">
|
在组件上使用 v-model
如果你还不熟悉 Vue 的组件，可以暂且跳过这里。
HTML 原生的输入元素类型并不总能满足需求。
幸好，Vue 的组件系统允许你创建具有完全自定义行为且可复用的输入组件。
这些输入组件甚至可以和 v-model 一起使用！要了解更多，请参阅组件指南中的自定义输入组件。
组件基础
基本示例
这里有一个 Vue 组件的示例：
// 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>' }) |
组件是可复用的 Vue 实例，且带有一个名字：在这个例子中是 <button-counter>。
我们可以在一个通过 new Vue 创建的 Vue 根实例中，把这个组件作为自定义元素来使用：
<div id="components-demo"> <button-counter></button-counter> </div> |
new Vue({ el: '#components-demo' })
|
因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，
例如 data、computed、watch、methods 以及生命周期钩子等。
仅有的例外是像 el 这样根实例特有的选项。
组件的复用
你可以将组件进行任意次数的复用：
<div id="components-demo"> <button-counter></button-counter> <button-counter></button-counter> <button-counter></button-counter> </div> |
注意当点击按钮时，每个组件都会各自独立维护它的 count。
因为你每用一次组件，就会有一个它的新实例被创建。
data 必须是一个函数
当我们定义这个 <button-counter> 组件时，你可能会发现它的 data 并不是像这样直接提供一个对象：
data: { count: 0 } |
取而代之的是，一个组件的 data 选项必须是一个函数，因此每个实例可以维护一份被返回对象的独立的拷贝：
data: function () { return { count: 0 } } |
如果 Vue 没有这条规则，点击一个按钮就可能会像如下代码一样影响到其它所有实例：
组件的组织
通常一个应用会以一棵嵌套的组件树的形式来组织：
例如，你可能会有页头、侧边栏、内容区等组件，每个组件又包含了其它的像导航链接、博文之类的组件。
为了能在模板中使用，这些组件必须先注册以便 Vue 能够识别。
这里有两种组件的注册类型：全局注册和局部注册。
至此，我们的组件都只是通过 Vue.component 全局注册的：
Vue.component('my-component-name', { // ... options ... }) |
全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例，也包括其组件树中的所有子组件的模板中。
到目前为止，关于组件注册你需要了解的就这些了，
如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把组件注册读完。
通过 Prop 向子组件传递数据
早些时候，我们提到了创建一个博文组件的事情。
问题是如果你不能向这个组件传递某一篇博文的标题或内容之类的我们想展示的数据的话，它是没有办法使用的。
这也正是 prop 的由来。Prop 是你可以在组件上注册的一些自定义特性。
当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性。
为了给博文组件传递一个标题，我们可以用一个 props 选项将其包含在该组件可接受的 prop 列表中：
Vue.component('blog-post', { props: ['title'], template: '<h3>{{ title }}</h3>' }) |
一个组件默认可以拥有任意数量的 prop，任何值都可以传递给任何 prop。
在上述模板中，你会发现我们能够在组件实例中访问这个值，就像访问 data 中的值一样。
一个 prop 被注册之后，你就可以像这样把数据作为一个自定义特性传递进来：
<blog-post title="My journey with Vue"></blog-post> <blog-post title="Blogging with Vue"></blog-post> <blog-post title="Why Vue is so fun"></blog-post> |
My journey with Vue
Blogging with Vue
Why Vue is so fun
然而在一个典型的应用中，你可能在 data 里有一个博文的数组：
new Vue({ el: '#blog-post-demo', data: { posts: [ { id: 1, title: 'My journey with Vue' }, { id: 2, title: 'Blogging with Vue' }, { id: 3, title: 'Why Vue is so fun' }, ] } }) |
并想要为每篇博文渲染一个组件：
<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title" ></blog-post> |
如上所示，你会发现我们可以使用 v-bind 来动态传递 prop。
这在你一开始不清楚要渲染的具体内容，比如从一个 API 获取博文列表的时候，是非常有用的。
到目前为止，关于 prop 你需要了解的大概就这些了，
如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把 prop 读完。
单个根元素
当构建一个 <blog-post> 组件时，你的模板最终会包含的东西远不止一个标题：
<h3>{{ post.title }}</h3>
|
最最起码，你会包含着篇博文的正文：
<h3>{{ post.title }}</h3> <div v-html="post.content"></div> |
然而如果你在模板中尝试这样写，
Vue 会显示一个错误，并解释道 every component must have a single root element (每个组件必须只有一个根元素)。
你可以将模板的内容包裹在一个父元素内，来修复这个问题，例如：
<div class="blog-post"> <h3>{{ post.title }}</h3> <div v-html="post.content"></div> </div> |
通过事件向父级组件发送消息
在我们开发 <blog-post> 组件时，它的一些功能可能要求我们和父级组件进行沟通。
例如我们可能会引入一个可访问性的功能来放大博文的字号，同时让页面的其它部分保持默认的字号。
在其父组件中，我们可以通过添加一个 postFontSize 数据属性来支持这个功能：
new Vue({ el: '#blog-posts-events-demo', data: { posts: [/* ... */], postFontSize: 1 } }) |
它可以在模板中用来控制所有博文的字号：
<div id="blog-posts-events-demo"> <div :style="{ fontSize: postFontSize + 'em' }"> <blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post" ></blog-post> </div> </div> |
现在我们在每篇博文正文之前添加一个按钮来放大字号：
Vue.component('blog-post', { props: ['post'], template: ` <div class="blog-post"> <h3>{{ post.title }}</h3> <button> Enlarge text </button> <div v-html="post.content"></div> </div> ` }) |
上述的这个和一些接下来的示例使用了 JavaScript 的模板字符串来让多行的模板更易读。它们在 IE 下并没有被支持，所以如果你需要在不 (经过 Babel 或 TypeScript 之类的工具) 编译的情况下支持 IE，请使用折行转义字符取而代之。
问题是这个按钮不会做任何事：
<button> Enlarge text </button> |
当点击这个按钮时，我们需要告诉父级组件放大所有博文的文本。
幸好 Vue 实例提供了一个自定义事件的系统来解决这个问题。
我们可以调用内建的 $emit 方法并传入事件的名字，来向父级组件触发一个事件：
<button v-on:click="$emit('enlarge-text')"> Enlarge text </button> |
然后我们可以用 v-on 在博文组件上监听这个事件，就像监听一个原生 DOM 事件一样：
<blog-post ... v-on:enlarge-text="postFontSize += 0.1" ></blog-post> |
My journey with Vue
Blogging with Vue
Why Vue is so fun
使用事件抛出一个值
有的时候用一个事件来抛出一个特定的值是非常有用的。
例如我们可能想让 <blog-post>组件决定它的文本要放大多少。
这时可以使用 $emit 的第二个参数来提供这个值：
<button v-on:click="$emit('enlarge-text', 0.1)"> Enlarge text </button> |
然后当在父级组件监听这个事件的时候，我们可以通过 $event 访问到被抛出的这个值：
<blog-post ... v-on:enlarge-text="postFontSize += $event" ></blog-post> |
或者，如果这个事件处理函数是一个方法：
<blog-post ... v-on:enlarge-text="onEnlargeText" ></blog-post> |
那么这个值将会作为第一个参数传入这个方法：
methods: { onEnlargeText: function (enlargeAmount) { this.postFontSize += enlargeAmount } } |
在组件上使用 v-model
自定义事件也可以用于创建支持 v-model 的自定义输入组件。记住：
<input v-model="searchText">
|
等价于：
<input v-bind:value="searchText" v-on:input="searchText = $event.target.value" > |
当用在组件上时，v-model 则会这样：
<custom-input v-bind:value="searchText" v-on:input="searchText = $event" ></custom-input> |
为了让它正常工作，这个组件内的 <input> 必须：
- 将其
value特性绑定到一个名叫value的 prop 上 - 在其
input事件被触发时，将新的值通过自定义的input事件抛出
写成代码之后是这样的：
Vue.component('custom-input', { props: ['value'], template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target.value) > ` }) |
现在 v-model 就应该可以在这个组件上完美地工作起来了：
<custom-input v-model="searchText"></custom-input>
|
到目前为止，关于组件自定义事件你需要了解的大概就这些了，
如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把自定义事件读完。
通过插槽分发内容
和 HTML 元素一样，我们经常需要向一个组件传递内容，像这样：
<alert-box> Something bad happened. </alert-box> |
可能会渲染出这样的东西：
幸好，Vue 自定义的 <slot> 元素让这变得非常简单：
Vue.component('alert-box', { template: ` <div class="demo-alert-box"> <strong>Error!</strong> <slot></slot> </div> ` }) |
如你所见，我们只要在需要的地方加入插槽就行了——就这么简单！
到目前为止，关于插槽你需要了解的大概就这些了，
如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把插槽读完。
动态组件
有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里：
上述内容可以通过 Vue 的 <component> 元素加一个特殊的 is 特性来实现：
<!-- 组件会在 `currentTabComponent` 改变时改变 --> <component v-bind:is="currentTabComponent"></component> |
在上述示例中，currentTabComponent 可以包括
- 已注册组件的名字，或
- 一个组件的选项对象
你可以在这里查阅并体验完整的代码，或在这个版本了解绑定组件选项对象，而不是已注册组件名的示例。
到目前为止，关于动态组件你需要了解的大概就这些了，
如果你阅读完本页内容并掌握了它的内容，我们会推荐你再回来把动态和异步组件读完。
解析 DOM 模板时的注意事项
有些 HTML 元素，诸如 <ul>、<ol>、<table> 和 <select>，对于哪些元素可以出现在其内部是有严格限制的。
而有些元素，诸如 <li>、<tr> 和 <option>，只能出现在其它某些特定的元素内部。
这会导致我们使用这些有约束条件的元素时遇到一些问题。
例如：
<table> <blog-post-row></blog-post-row> </table> |
这个自定义组件 <blog-post-row> 会被作为无效的内容提升到外部，并导致最终渲染结果出错。
幸好这个特殊的 is 特性给了我们一个变通的办法：
<table> <tr is="blog-post-row"></tr> </table> |
需要注意的是如果我们从以下来源使用模板的话，这条限制是不存在的：
- 字符串 (例如：
template: '...') - 单文件组件 (
.vue) <script type="text/x-template">
到这里，你需要了解的解析 DOM 模板时的注意事项——实际上也是 Vue 的全部必要内容，大概就是这些了。
恭喜你！接下来还有很多东西要去学习，不过首先，我们推荐你先休息一下，试用一下 Vue，自己随意做些好玩的东西。
如果你感觉已经掌握了这些知识，我们推荐你再回来把完整的组件指南，包括侧边栏中组件深入章节的所有页面读完。
组件注册
该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。
组件名
在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了：
Vue.component('my-component-name', { /* ... */ })
|
该组件名就是 Vue.component 的第一个参数。
当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，
我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。
这会帮助你避免和当前以及未来的 HTML 元素相冲突。
你可以在风格指南中查阅到关于组件名的其它建议。
组件名大小写
定义组件名的方式有两种：
使用 kebab-case
Vue.component('my-component-name', { /* ... */ })
|
当使用 kebab-case (短横线分隔命名) 定义一个组件时，
你也必须在引用这个自定义元素时使用 kebab-case，例如 <my-component-name>。
使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })
|
当使用 PascalCase (驼峰式命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。
也就是说 <my-component-name> 和 <MyComponentName> 都是可接受的。
注意，尽管如此，直接在 DOM (即非字符串的模板) 中使用时只有 kebab-case 是有效的。
全局注册
到目前为止，我们只用过 Vue.component 来创建组件：
Vue.component('my-component-name', { // ... 选项 ... }) |
这些组件是全局注册的。
也就是说它们在注册之后可以用在任何新创建的 Vue 根实例 (new Vue) 的模板中。
比如：
Vue.component('component-a', { /* ... */ }) Vue.component('component-b', { /* ... */ }) Vue.component('component-c', { /* ... */ }) new Vue({ el: '#app' }) |
<div id="app"> <component-a></component-a> <component-b></component-b> <component-c></component-c> </div> |
在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。
局部注册
全局注册往往是不够理想的。
比如，如果你使用一个像 webpack 这样的构建系统，
全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。
这造成了用户下载的 JavaScript 的无谓的增加。
在这些情况下，你可以通过一个普通的 JavaScript 对象来定义组件：
var ComponentA = { /* ... */ } var ComponentB = { /* ... */ } var ComponentC = { /* ... */ } |
然后在 components 选项中定义你想要使用的组件：
new Vue({ el: '#app' components: { 'component-a': ComponentA, 'component-b': ComponentB } }) |
对于 components 对象中的每个属性来说，其属性名就是自定义元素的名字，其属性值就是这个组件的选项对象。
注意局部注册的组件在其子组件中不可用。
例如，如果你希望 ComponentA 在 ComponentB 中可用，则你需要这样写：
var ComponentA = { /* ... */ } var ComponentB = { components: { 'component-a': ComponentA }, // ... } |
或者如果你通过 Babel 和 webpack 使用 ES2015 模块，那么代码看起来更像：
import ComponentA from './ComponentA.vue' export default { components: { ComponentA }, // ... } |
注意在 ES2015+ 中，在对象中放一个类似 ComponentA 的变量名其实是 ComponentA: ComponentA 的缩写，
即这个变量名同时是：
- 用在模板中的自定义元素的名称
- 包含了这个组件选项的变量名
模块系统
如果你没有通过 import/require 使用一个模块系统，也许可以暂且跳过这个章节。
如果你使用了，那么我们会为你提供一些特殊的使用说明和注意事项。
在模块系统中局部注册
如果你还在阅读，说明你使用了诸如 Babel 和 webpack 的模块系统。
在这些情况下，我们推荐在每个组件各自的文件里创建一个 components。
然后你需要在局部注册之前导入每个你想使用的组件。
例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中：
import ComponentA from './ComponentA' import ComponentC from './ComponentC' export default { components: { ComponentA, ComponentC }, // ... } |
现在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。
基础组件的自动化全局注册
可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。
我们有时候会把它们称为基础组件，它们会在各个组件中被频繁的用到。
所以会导致很多组件里都会有一个包含基础组件的长列表：
import BaseButton from './BaseButton.vue' import BaseIcon from './BaseIcon.vue' import BaseInput from './BaseInput.vue' export default { components: { BaseButton, BaseIcon, BaseInput } } |
而只是用于模板中的一小部分：
<BaseInput v-model="searchText" @keydown.enter="search" /> <BaseButton @click="search"> <BaseIcon name="search"/> </BaseButton> |
幸好如果你使用了 webpack (或在内部使用了 webpack 的 Vue CLI 3+)，
那么就可以使用 require.context 只全局注册这些非常通用的基础组件。
这里有一份可以让你在应用入口文件 (比如 src/main.js) 中全局导入基础组件的示例代码：
import Vue from 'vue' import upperFirst from 'lodash/upperFirst' import camelCase from 'lodash/camelCase' const requireComponent = require.context( // 其组件目录的相对路径 './components', // 是否查询其子目录 false, // 匹配基础组件文件名的正则表达式 /Base[A-Z]\w+\.(vue|js)$/ ) requireComponent.keys().forEach(fileName => { // 获取组件配置 const componentConfig = requireComponent(fileName) // 获取组件的 PascalCase 命名 const componentName = upperFirst( camelCase( // 剥去文件名开头的 `'./` 和结尾的扩展名 fileName.replace(/^\.\/(.*)\.\w+$/, '$1') ) ) // 全局注册组件 Vue.component( componentName, // 如果这个组件选项是通过 `export default` 导出的， // 那么就会优先使用 `.default`， // 否则回退到使用模块的根。 componentConfig.default || componentConfig ) }) |
记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。
这里有一个真实项目情景下的示例。
Prop
该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。
Prop 的大小写 (camelCase vs kebab-case)
HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。
这意味着当你使用 DOM 中的模板时，
camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：
Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h3>{{ postTitle }}</h3>' }) |
<!-- 在 HTML 中是 kebab-case 的 --> <blog-post post-title="hello!"></blog-post> |
重申一次，如果你使用字符串模板，那么这个限制就不存在了。
静态的和动态的 Prop
像这样，你已经知道了可以像这样给 prop 传入一个静态的值：
<blog-post title="My journey with Vue"></blog-post>
|
你也知道 prop 可以通过 v-bind 动态赋值，例如：
<blog-post v-bind:title="post.title"></blog-post>
|
在上述两个示例中，我们传入的值都是字符串类型的，但实际上任何类型的值都可以传给一个 prop。
传入一个数字
<!-- 即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个 JavaScript 表达式而不是一个字符串。--> <blog-post v-bind:likes="42"></blog-post> <!-- 用一个变量进行动态赋值。--> <blog-post v-bind:likes="post.likes"></blog-post> |
传入一个布尔值
<!-- 包含该 prop 没有值的情况在内，都意味着 `true`。--> <blog-post favorited></blog-post> <!-- 即便 `false` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个 JavaScript 表达式而不是一个字符串。--> <base-input v-bind:favorited="false"> <!-- 用一个变量进行动态赋值。--> <base-input v-bind:favorited="post.currentUserFavorited"> |
传入一个数组
<!-- 即便数组是静态的，我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个 JavaScript 表达式而不是一个字符串。--> <blog-post v-bind:comment-ids="[234, 266, 273]"></blog-post> <!-- 用一个变量进行动态赋值。--> <blog-post v-bind:comment-ids="post.commentIds"></blog-post> |
传入一个对象
<!-- 即便对象是静态的，我们仍然需要 `v-bind` 来告诉 Vue --> <!-- 这是一个 JavaScript 表达式而不是一个字符串。--> <blog-post v-bind:comments="{ id: 1, title: 'My Journey with Vue' }"></blog-post> <!-- 用一个变量进行动态赋值。--> <blog-post v-bind:post="post"></blog-post> |
传入一个对象的所有属性
如果你想要将一个对象的所有属性都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。
例如，对于一个给定的对象 post：
post: { id: 1, title: 'My Journey with Vue' } |
下面的模板：
<blog-post v-bind="post"></blog-post>
|
等价于：
<blog-post v-bind:id="post.id" v-bind:title="post.title" ></blog-post> |
单向数据流
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：
即: 父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
这样会防止从子组件意外改变父级组件的状态，从而导致你的应用的数据流向难以理解。
额外的，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。
这意味着你不应该在一个子组件内部改变 prop。
如果你这样做了，Vue 会在浏览器的控制台中发出警告。
这里有两种常见的试图改变一个 prop 的情形：
这个 prop 用来传递一个初始值；这个子组件接下来希望将其作为一个本地的 prop 数据来使用。在这种情况下，最好定义一个本地的 data 属性并将这个 prop 用作其初始值：
props: ['initialCounter'], data: function () { return { counter: this.initialCounter } }
这个 prop 以一种原始的值传入且需要进行转换。在这种情况下，最好使用这个 prop 的值来定义一个计算属性：
props: ['size'], computed: { normalizedSize: function () { return this.size.trim().toLowerCase() } }
注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。
Prop 验证
我们可以为组件的 prop 指定需求。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。
这在开发一个会被别人用到的组件时尤其有帮助。
为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。
例如：
Vue.component('my-component', { props: { // 基础的类型检查 (`null` 匹配任何类型) propA: Number, // 多个可能的类型 propB: [String, Number], // 必填的字符串 propC: { type: String, required: true }, // 带有默认值的数字 propD: { type: Number, default: 100 }, // 带有默认值的对象 propE: { type: Object, // 对象或数组且一定会从一个工厂函数返回默认值 default: function () { return { message: 'hello' } } }, // 自定义验证函数 propF: { validator: function (value) { // 这个值必须匹配下列字符串中的一个 return ['success', 'warning', 'danger'].indexOf(value) !== -1 } } } }) |
当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告。
注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的属性 (如 data、computed 等) 在 default 或 validator 函数中是不可用的。
类型检查
type 可以是下列原生构造函数中的一个：
StringNumberBooleanFunctionObjectArraySymbol
额外的，type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认。
例如，给定下列现成的构造函数：
function Person (firstName, lastName) { this.firstName = firstName this.lastName = lastName } |
你可以使用：
Vue.component('blog-post', { props: { author: Person } }) |
来验证 author prop 的值是否是通过 new Person 创建的。
非 Prop 的特性
一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性。
因为显式定义的 prop 适用于向一个子组件传入信息，然而组件库的作者并不总能预见组件会被用于怎样的场景。
这也是为什么组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上。
例如，想象一下你通过一个 Bootstrap 插件使用了一个第三方的 <bootstrap-data-input>组件，
这个插件需要在其 <input> 上用到一个 data-date-picker 特性。
我们可以将这个特性添加到你的组件实例上：
<bootstrap-date-input data-date-picker="activated"></bootstrap-date-input>
|
然后这个 data-date-picker="activated" 特性就会自动添加到 <bootstrap-date-input>的根元素上。
替换/合并已有的特性
想象一下 <bootstrap-date-input> 的模板是这样的：
<input type="date" class="form-control">
|
为了给我们的日期选择器插件定制一个主题，我们可能需要像这样添加一个特别的类名：
<bootstrap-date-input data-date-picker="activated" class="date-picker-theme-dark" ></bootstrap-date-input> |
在这种情况下，我们定义了两个不同的 class 的值：
form-control，这是在组件的模板内设置好的date-picker-theme-dark，这是从组件的父级传入的
对于绝大多数特性来说，从外部提供给组件的值会替换掉组件内部设置好的值。
所以如果传入 type="text" 就会替换掉 type="date" 并把它破坏！
庆幸的是，class 和 style 特性会稍微智能一些，即两边的值会被合并起来，从而得到最终的值：form-control date-picker-theme-dark。
禁用特性继承
如果你不希望组件的根元素继承特性，你可以设置在组件的选项中设置 inheritAttrs: false。
例如：
Vue.component('my-component', { inheritAttrs: false, // ... }) |
这尤其适合配合实例的 $attrs 属性使用，该属性包含了传递给一个组件的特性名和特性值，
例如：
{ class: 'username-input', placeholder: 'Enter your username' } |
有了 inheritAttrs: false 和 $attrs，你就可以手动决定这些特性会被赋予哪个元素。
在撰写基础组件的时候是常会用到的：
Vue.component('base-input', { inheritAttrs: false, props: ['label', 'value'], template: ` <label> {{ label }} <input v-bind="$attrs" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > </label> ` }) |
这个模式允许你在使用基础组件的时候更像是使用原始的 HTML 元素，而不会担心哪个元素是真正的根元素：
<base-input v-model="username" class="username-input" placeholder="Enter your username" ></base-input> |
自定义事件
该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。
事件名
跟组件和 prop 不同，事件名不存在任何自动化的大小写转换。
而是触发的事件名需要完全匹配监听这个事件所用的名称。
举个例子，如果触发一个 camelCase 名字的事件：
this.$emit('myEvent')
|
则监听这个名字的 kebab-case 版本是不会有任何效果的：
<my-component v-on:my-event="doSomething"></my-component>
|
跟组件和 prop 不同，事件名不会被用作一个 JavaScript 变量名或属性名，
所以就没有理由使用 camelCase 或 PascalCase 了。
并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，
所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。
因此，我们推荐你始终使用 kebab-case 的事件名。
自定义组件的 v-model
2.2.0+ 新增
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，
但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。
model 选项可以用来避免这样的冲突：
Vue.component('base-checkbox', { model: { prop: 'checked', event: 'change' }, props: { checked: Boolean }, template: ` <input type="checkbox" v-bind:checked="checked" v-on:change="$emit('change', $event.target.checked)" > ` }) |
现在在这个组件上使用 v-model 当时候：
<base-checkbox v-model="lovingVue"></base-checkbox>
|
这里的 lovingVue 的值将会传入这个名为 checked 的 prop。
同时当 <base-checkbox>触发一个 change 事件并附带一个新的值的时候，这个 lovingVue 的属性将会被更新。
注意你仍然需要在组件的 props 选项里声明 checked 这个 prop。
将原生事件绑定到组件
你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。
这时，你可以使用 v-on 的 .native 修饰符：
<base-input v-on:focus.native="onFocus"></base-input>
|
在有的时候这是很有用的，不过在你尝试监听一个类似 <input> 的非常特定的元素时，这并不是个好主意。
比如上述 <base-input> 组件可能做了如下重构，所以根元素实际上是一个 <label> 元素：
<label> {{ label }} <input v-bind="$attrs" v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > </label> |
这时，父级的 .native 监听器将静默失败。
它不会产生任何报错，但是 onFocus 处理函数不会如你预期地被调用。
为了解决这个问题，Vue 提供了一个 $listeners 属性，它是一个对象，里面包含了作用在这个组件上的所有监听器。
例如：
{ focus: function (event) { /* ... */ } input: function (value) { /* ... */ }, } |
有了这个 $listeners 属性，你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。
对于类似 <input> 的你希望它也可以配合 v-model 工作的组件来说，
为这些监听器创建一个类似下述 inputListeners 的计算属性通常是非常有用的：
Vue.component('base-input', { inheritAttrs: false, props: ['label', 'value'], computed: { inputListeners: function () { var vm = this // `Object.assign` 将所有的对象合并为一个新对象 return Object.assign({}, // 我们从父级添加所有的监听器 this.$listeners, // 然后我们添加自定义监听器， // 或覆写一些监听器的行为 { // 这里确保组件配合 `v-model` 的工作 input: function (event) { vm.$emit('input', event.target.value) } } ) } }, template: ` <label> {{ label }} <input v-bind="$attrs" v-bind:value="value" v-on="inputListeners" > </label> ` }) |
现在 <base-input> 组件是一个完全透明的包裹器了，
也就是说它可以完全像一个普通的 <input> 元素一样使用了：所有跟它相同的特性和监听器的都可以工作。
.sync 修饰符
2.3.0+ 新增
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。
不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。
这也是为什么我们推荐以 update:my-prop-name 的模式触发事件取而代之。
举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：
this.$emit('update:title', newTitle)
|
然后父组件可以监听那个事件并根据需要更新一个本地的数据属性。例如：
<text-document v-bind:title="doc.title" v-on:update:title="doc.title = $event" ></text-document> |
为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符：
<text-document v-bind:title.sync="doc.title"></text-document>
|
当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用：
<text-document v-bind.sync="doc"></text-document>
|
这样会把 doc 对象中的每一个属性 (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。
将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。
插槽
该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。
插槽内容
Vue 实现了一套内容分发的 API，这套 API 基于当前的 Web Components 规范草案，将 <slot> 元素作为承载分发内容的出口。
它允许你像这样合成组件：
<navigation-link url="/profile"> Your Profile </navigation-link> |
然后你在 <navigation-link> 的模板中可能会写为：
<a v-bind:href="url" class="nav-link" > <slot></slot> </a> |
当组件渲染的时候，这个 <slot> 元素将会被替换为“Your Profile”。
插槽内可以包含任何模板代码，包括 HTML：
<navigation-link url="/profile"> <!-- 添加一个 Font Awesome 图标 --> <span class="fa fa-user"></span> Your Profile </navigation-link> |
甚至其它的组件：
<navigation-link url="/profile"> <!-- 添加一个图标的组件 --> <font-awesome-icon name="user"></font-awesome-icon> Your Profile </navigation-link> |
如果 <navigation-link> 没有包含一个 <slot> 元素，则任何传入它的内容都会被抛弃。
具名插槽
有些时候我们需要多个插槽。例如，一个假设的 <base-layout> 组件多模板如下：
<div class="container"> <header> <!-- 我们希望把页头放这里 --> </header> <main> <!-- 我们希望把主要内容放这里 --> </main> <footer> <!-- 我们希望把页脚放这里 --> </footer> </div> |
对于这样的情况，<slot> 元素有一个特殊的特性：name。这个特性可以用来定义额外的插槽：
<div class="container"> <header> <slot name="header"></slot> </header> <main> <slot></slot> </main> <footer> <slot name="footer"></slot> </footer> </div> |
在向具名插槽提供内容的时候，我们可以在一个父组件的 <template> 元素上使用 slot特性：
<base-layout> <template slot="header"> <h1>Here might be a page title</h1> </template> <p>A paragraph for the main content.</p> <p>And another one.</p> <template slot="footer"> <p>Here's some contact info</p> </template> </base-layout> |
另一种 slot 特性的用法是直接用在一个普通的元素上：
<base-layout> <h1 slot="header">Here might be a page title</h1> <p>A paragraph for the main content.</p> <p>And another one.</p> <p slot="footer">Here's some contact info</p> </base-layout> |
我们还是可以保留一个未命名插槽，这个插槽是默认插槽，
也就是说它会作为所有未匹配到插槽的内容的统一出口。上述两个示例渲染出来的 HTML 都将会是：
<div class="container"> <header> <h1>Here might be a page title</h1> </header> <main> <p>A paragraph for the main content.</p> <p>And another one.</p> </main> <footer> <p>Here's some contact info</p> </footer> </div> |
默认插槽的内容
有的时候为插槽提供默认的内容是很有用的。
例如，一个 <submit-button> 组件可能希望这个按钮的默认内容是“Submit”，
但是同时允许用户覆写为“Save”、“Upload”或别的内容。
你可以在 <slot> 标签内部指定默认的内容来做到这一点。
<button type="submit"> <slot>Submit</slot> </button> |
如果父组件为这个插槽提供了内容，则默认的内容会被替换掉。
编译作用域
当你想在插槽内使用数据时，例如：
<navigation-link url="/profile"> Logged in as {{ user.name }} </navigation-link> |
该插槽可以访问跟这个模板的其它地方相同的实例属性 (也就是说“作用域”是相同的)。
但这个插槽不能访问 <navigation-link> 的作用域。
例如尝试访问 url 是不会工作的。牢记一条准则：
父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。
作用域插槽
2.1.0+ 新增
有的时候你希望提供的组件带有一个可从子组件获取数据的可复用的插槽。
例如一个简单的 <todo-list> 组件的模板可能包含了如下代码：
<ul> <li v-for="todo in todos" v-bind:key="todo.id" > {{ todo.text }} </li> </ul> |
但是在我们应用的某些部分，我们希望每个独立的待办项渲染出和 todo.text 不太一样的东西。
这也是作用域插槽的用武之地。
为了让这个特性成为可能，你需要做的全部事情就是将待办项内容包裹在一个 <slot> 元素上，
然后将所有和其上下文相关的数据传递给这个插槽：在这个例子中，这个数据是 todo 对象：
<ul> <li v-for="todo in todos" v-bind:key="todo.id" > <!-- 我们为每个 todo 准备了一个插槽，--> <!-- 将 `todo` 对象作为一个插槽的 prop 传入。--> <slot v-bind:todo="todo"> <!-- 回退的内容 --> {{ todo.text }} </slot> </li> </ul> |
现在当我们使用 <todo-list> 组件的时候，我们可以选择为待办项定义一个不一样的 <template> 作为替代方案，
并且可以通过 slot-scope 特性从子组件获取数据：
<todo-list v-bind:todos="todos"> <!-- 将 `slotProps` 定义为插槽作用域的名字 --> <template slot-scope="slotProps"> <!-- 为待办项自定义一个模板，--> <!-- 通过 `slotProps` 定制每个待办项。--> <span v-if="slotProps.todo.isComplete">✓</span> {{ slotProps.todo.text }} </template> </todo-list> |
在 2.5.0+，
slot-scope不再限制在<template>元素上使用，而可以用在插槽内的任何元素或组件上。
解构 slot-scope
如果一个 JavaScript 表达式在一个函数定义的参数位置有效，那么这个表达式实际上就可以被 slot-scope 接受。
也就是说你可以在支持的环境下 (单文件组件或现代浏览器)，在这些表达式中使用 ES2015 解构语法。
例如：
<todo-list v-bind:todos="todos"> <template slot-scope="{ todo }"> <span v-if="todo.isComplete">✓</span> {{ todo.text }} </template> </todo-list> |
这会使作用域插槽变得更干净一些。
动态组件 & 异步组件
该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。
在动态组件上使用 keep-alive
我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件：
<component v-bind:is="currentTabComponent"></component>
|
当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。
例如我们来展开说一说这个多标签界面：
- Cat Ipsum
- Hipster Ipsum
- Cupcake Ipsum
你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。
这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例。
重新创建动态组件的行为通常是非常有用的，
但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。
为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。
<!-- 失活的组件将会被缓存！--> <keep-alive> <component v-bind:is="currentTabComponent"></component> </keep-alive> |
来看看修改后的结果：
- Cat Ipsum
- Hipster Ipsum
- Cupcake Ipsum
现在这个 Posts 标签保持了它的状态 (被选中的文章) 甚至当它未被渲染时也是如此。
你可以在这个 fiddle 查阅到完整的代码。
注意这个 <keep-alive> 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。
你可以在 API 参考文档 查阅更多关于 <keep-alive> 的细节。
异步组件
在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。
为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。
Vue 只有在这个组件需要被渲染的时候才会被触发，且会把结果缓存起来供未来重渲染。
例如：
Vue.component('async-example', function (resolve, reject) { setTimeout(function () { // 向 `resolve` 回调传递组件定义 resolve({ template: '<div>I am async!</div>' }) }, 1000) }) |
如你所见，这个工厂函数会收到一个 resolve 回调，这个回调函数会在你从服务器得到组件定义的时候被调用。
你也可以调用 reject(reason) 来表示加载失败。
这里的 setTimeout 是为了演示用的，如何获取组件取决于你自己。
一个推荐的做法是将异步组件和 webpack 的 code-splitting 功能一起配合使用：
Vue.component('async-webpack-example', function (resolve) { // 这个特殊的 `require` 语法将会告诉 webpack // 自动将你的构建代码切割成多个包，这些包 // 会通过 Ajax 请求加载 require(['./my-async-component'], resolve) }) |
你也可以在工厂函数中返回一个 Promise，所以把 webpack 2 和 ES2015 语法加在一起，我们可以写成这样：
Vue.component( 'async-webpack-example', // 这个 `import` 函数会返回一个 `Promise` 对象。 () => import('./my-async-component') ) |
当使用局部注册当时候，你也可以直接提供一个返回 Promise 的函数：
new Vue({ // ... components: { 'my-component': () => import('./my-async-component') } }) |
如果你是一个 Browserify 用户同时喜欢使用异步组件，很不幸这个工具的作者明确表示异步加载“并不会被 Browserify 支持”，至少官方不会。Browserify 社区已经找到了一些变通方案，这些方案可能会对已存在的复杂应用有帮助。对于其它的场景，我们推荐直接使用 webpack，以拥有内建的被作为第一公民的异步支持。
处理加载状态
2.3.0+ 新增
这里的异步组件工厂函数也可以返回一个如下格式的对象：
const AsyncComponent = () => ({ // 需要加载的组件 (应该是一个 `Promise` 对象) component: import('./MyComponent.vue'), // 异步组件加载时使用的组件 loading: LoadingComponent, // 加载失败时使用的组件 error: ErrorComponent, // 展示加载时组件的延时时间。默认值是 200 (毫秒) delay: 200, // 如果提供了超时时间且组件加载也超时了， // 则使用加载失败时使用的组件。默认值是：`Infinity` timeout: 3000 }) |
注意如果你希望在 Vue Router 的路由组件中使用上述语法的话，你必须使用 Vue Router 2.4.0+ 版本。
处理边界情况
该页面假设你已经阅读过了组件基础。如果你还对组件不太了解，推荐你先阅读它。
这里记录的都是和处理边界情况有关的功能，即一些需要对 Vue 的规则做一些小调整的特殊情况。不过注意这些功能都是有劣势或危险的场景的。我们会在每个案例中注明，所以当你使用每个功能的时候请稍加留意。
访问元素 & 组件
在绝大多数情况下，我们最好不要触达另一个组件实例内部或手动操作 DOM 元素。
不过也确实在一些情况下做这些事情是合适的。
访问根实例
在每个 new Vue 实例的子组件中，其根实例可以通过 $root 属性进行访问。
例如，在这个根实例中：
// Vue 根实例 new Vue({ data: { foo: 1 }, computed: { bar: function () { /* ... */ } } methods: { baz: function () { /* ... */ } } }) |
所有的子组件都可以将这个实例作为一个全局 store 来访问或使用。
// 获取根组件的数据 this.$root.foo // 写入根组件的数据 this.$root.foo = 2 // 访问根组件的计算属性 this.$root.bar // 调用根组件的方法 this.$root.baz() |
对于 demo 或非常小型的有少量组件的应用来说这是很方便的。不过这个模式扩展到中大型应用来说就不然了。因此在绝大多数情况下，我们强烈推荐使用 Vuex 来管理应用的状态。
访问父级组件实例
和 $root 类似，$parent 属性可以用来从一个子组件访问父组件的实例。
它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以 prop 的方式传入子组件的方式。
在绝大多数情况下，触达父级组件会使得你的应用更难调试和理解，尤其是当你变更了父级组件的数据的时候。当我们稍后回看那个组件的时候，很难找出那个变更是从来里发起的。
另外在一些可能适当的时候，你需要特别地共享一些组件库。
举个例子，在和 JavaScript API 进行交互而不渲染 HTML 的抽象组件内，诸如这些假设性的 Google 地图组件一样：
<google-map> <google-map-markers v-bind:places="iceCreamShops"></google-map-markers> </google-map> |
这个 <google-map> 组件可以定义一个 map 属性，所有的子组件都需要访问它。
在这种情况下 <google-map-markers> 可能想要通过类似 this.$parent.getMap 的方式访问那个地图，以便为其添加一组标记。
你可以在这里查阅这种模式。
请留意，尽管如此，通过这种模式构建出来的那个组件的内部仍然是容易出现问题的。
比如，设想一下我们添加一个新的 <google-map-region> 组件，
当 <google-map-markers>在其内部出现的时候，只会渲染那个区域内的标记：
<google-map> <google-map-region v-bind:shape="cityBoundaries"> <google-map-markers v-bind:places="iceCreamShops"></google-map-markers> </google-map-region> </google-map> |
那么在 <google-map-markers> 内部你可能发现自己需要一些类似这样的 hack：
var map = this.$parent.map || this.$parent.$parent.map
|
很快它就会失控。这也是我们针对需要向任意更深层级的组件提供上下文信息时推荐依赖注入的原因。
访问子组件实例或子元素
尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。
为了达到这个目的，你可以通过 ref 特性为这个子组件赋予一个 ID 引用。
例如：
<base-input ref="usernameInput"></base-input>
|
现在在你已经定义了这个 ref 的组件里，你可以使用：
this.$refs.usernameInput
|
来访问这个 <base-input> 实例，以便不时之需。
比如程序化的从一个父级组件聚焦这个输入框。
在刚才那个例子中，该 <base-input> 组件也可以使用一个类似的 ref 提供对内部这个指定元素的访问，
例如：
<input ref="input">
|
甚至可以通过其父级组件定义方法：
methods: { // 用来从父级组件聚焦输入框 focus: function () { this.$refs.input.focus() } } |
这样就允许父级组件通过下面的代码聚焦 <base-input> 里的输入框：
this.$refs.usernameInput.focus()
|
当 ref 和 v-for 一起使用的时候，你得到的引用将会是一个包含了对应数据源的这些子组件的数组。
$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这只意味着一个直接的子组件封装的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。
依赖注入
在此之前，在我们描述访问父级组件实例的时候，展示过一个类似这样的例子：
<google-map> <google-map-region v-bind:shape="cityBoundaries"> <google-map-markers v-bind:places="iceCreamShops"></google-map-markers> </google-map-region> </google-map> |
在这个组件里，所有 <google-map> 的后代都需要访问一个 getMap 方法，以便知道要跟那个地图进行交互。
不幸的是，使用 $parent 属性无法很好的扩展到更深层级的嵌套组件上。
这也是依赖注入的用武之地，它用到了两个新的实例选项：provide 和 inject。
provide 选项允许我们指定我们想要提供给后代组件的数据/方法。
在这个例子中，就是 <google-map> 内部的 getMap 方法：
provide: function () { return { getMap: this.getMap } } |
然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性：
inject: ['getMap']
|
你可以在这里看到完整的示例。
相比 $parent 来说，这个用法可以让我们在任意后代组件中访问 getMap，而不需要暴露整个 <google-map> 实例。
这允许我们更好的持续研发该组件，而不需要担心我们可能会改变/移除一些子组件依赖的东西。
同时这些组件之间的接口是始终明确定义的，就和 props 一样。
实际上，你可以把依赖注入看作一部分“大范围有效的 prop”，除了：
- 祖先组件不需要知道哪些后代组件使用它提供的属性
- 后代组件不需要知道被注入的属性来自哪里
然而，依赖注入还是有负面影响的。它将你的应用目前的组件组织方式耦合了起来，使重构变得更加困难。同时所提供的属性是非响应式的。这是出于设计的考虑，因为使用它们来创建一个中心化规模化的数据跟使用 $root做这件事都是不够好的。如果你想要共享的这个属性是你的应用特有的，而不是通用化的，或者如果你想在祖先组件中更新所提供的数据，那么这意味着你可能需要换用一个像 Vuex 这样真正的状态管理方案了。
你可以在 API 参考文档学习更多关于依赖注入的知识。
程序化的事件侦听器
现在，你已经知道了 $emit 的用法，它可以被 v-on 侦听，
但是 Vue 实例同时在其事件接口中提供了其它的方法。
我们可以：
- 通过
$on(eventName, eventHandler)侦听一个事件 - 通过
$once(eventName, eventHandler)一次性侦听一个事件 - 通过
$off(eventName, eventHandler)停止侦听一个事件
你通常不会用到这些，但是当你需要在一个组件实例上手动侦听事件时，它们是派得上用场的。
它们也可以用于代码组织工具。例如，你可能经常看到这种集成一个第三方库的模式：
// 一次性将这个日期选择器附加到一个输入框上 // 它会被挂载到 DOM 上。 mounted: function () { // Pikaday 是一个第三方日期选择器到库 this.picker = new Pikaday({ field: this.$refs.input, format: 'YYYY-MM-DD' }) }, // 在组件被销毁之前， // 也销毁这个日期选择器。 beforeDestroy: function () { this.picker.destroy() } |
这里有两个潜在的问题：
- 它需求在这个组件实例中保存这个
picker，如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题，但是它可以被视为杂物。 - 我们的建立代码独立于我们的清理代码，这使得我们比较难于程序化的清理我们建立的所有东西。
你应该通过一个程序化的侦听器解决这两个问题：
mounted: function () { var picker = new Pikaday({ field: this.$refs.input, format: 'YYYY-MM-DD' }) this.$once('hook:beforeDestroy', function () { picker.destroy() }) } |
使用了这个策略，我甚至可以让多个输入框元素同时使用不同的 Pikaday，每个新的实例都程序化的在后期清理它自己：
mounted: function () { this.attachDatepicker('startDateInput') this.attachDatepicker('endDateInput') }, methods: { attachDatepicker: function (refName) { var picker = new Pikaday({ field: this.$refs[refName], format: 'YYYY-MM-DD' }) this.$once('hook:beforeDestroy', function () { picker.destroy() }) } } |
查阅这个 fiddle 可以了解到完整的代码。
注意，即便如此，如果你发现自己不得不在单个组件里做很多建立和清理的工作，最好的方式通常还是创建更多的模块化组件。
在这个例子中，我们推荐创建一个可复用的 <input-datepicker> 组件。
想了解更多程序化侦听器的内容，请查阅实例方法 / 事件相关的 API。
注意 Vue 的事件系统不同于浏览器的 EventTarget API。尽管它们工作起来是相似的，但是 $emit、$on, 和 $off 并不是 dispatchEvent、addEventListener和 removeEventListener 的别名。
循环引用
递归组件
组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事：
name: 'unique-name-of-my-component'
|
当你使用 Vue.component 全局注册一个组件时，这个全局的 ID 会自动设置为该组件的 name 选项。
Vue.component('unique-name-of-my-component', { // ... }) |
稍有不慎，递归组件就可能导致无限循环：
name: 'stack-overflow', template: '<div><stack-overflow></stack-overflow></div>' |
类似上述的组件将会导致“max stack size exceeded”错误，
所以请确保递归调用是条件性的 (例如使用一个最终会得到 false 的 v-if)。
组件之间的循环引用
假设你需要构建一个文件目录树，像访达或资源管理器那样的。
你可能有一个 <tree-folder> 组件，模板是这样的：
<p> <span>{{ folder.name }}</span> <tree-folder-contents :children="folder.children"/> </p> |
还有一个 <tree-folder-contents> 组件，模板是这样的：
<ul> <li v-for="child in children"> <tree-folder v-if="child.children" :folder="child"/> <span v-else>{{ child.name }}</span> </li> </ul> |
当你仔细观察的时候，你会发现这些组件在渲染树中互为对方的后代和祖先——一个悖论！
当通过 Vue.component 全局注册组件的时候，这个悖论会被自动解开。
如果你是这样做的，那么你可以跳过这里。
然而，如果你使用一个模块系统依赖/导入组件，
例如通过 webpack 或 Browserify，你会遇到一个错误：
Failed to mount component: template or render function not defined.
|
为了解释这里发生了什么，我们先把两个组件称为 A 和 B。
模块系统发现它需要 A，但是首先 A 依赖 B，但是 B 又依赖 A，但是 A 又依赖 B，如此往复。
这变成了一个循环，不知道如何不经过其中一个组件而完全解析出另一个组件。
为了解决这个问题，我们需要给模块系统一个点，在那里“A 反正是需要 B 的，但是我们不需要先解析 B。”
在我们的例子中，把 <tree-folder> 组件设为了那个点。
我们知道那个产生悖论的子组件是 <tree-folder-contents> 组件，
所以我们会等到生命周期钩子 beforeCreate 时去注册它：
beforeCreate: function () { this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default } |
或者，在本地注册组件的时候，你可以使用 webpack 的异步 import：
components: { TreeFolderContents: () => import('./tree-folder-contents.vue') } |
这样问题就解决了！
模板定义的替代品
内联模板
当 inline-template 这个特殊的特性出现在一个子组件上时，
这个组件将会使用其里面的内容作为模板，而不是将其作为被分发的内容。
这使得模板的撰写工作更加灵活。
<my-component inline-template> <div> <p>These are compiled as the component's own template.</p> <p>Not parent's transclusion content.</p> </div> </my-component> |
不过，inline-template 会让你模板的作用域变得更加难以理解。所以作为最佳实践，请在组件内优先选择 template 选项或 .vue 文件里的一个 <template>元素来定义模板。
X-Templates
另一个定义模板的方式是在一个 <script> 元素中，并为其带上 text/x-template 的类型，然后通过一个 id 将模板引用过去。
例如：
<script type="text/x-template" id="hello-world-template"> <p>Hello hello hello</p> </script> |
Vue.component('hello-world', { template: '#hello-world-template' }) |
这些可以用于模板特别大的 demo 或极小型的应用，但是其它情况下请避免使用，因为这会将模板和该组件的其它定义分离开。
控制更新
感谢 Vue 的响应式系统，它始终知道何时进行更新 (如果你用对了的话)。
不过还是有一些边界情况，你想要强制更新，尽管表面上看响应式的数据没有发生改变。
也有一些情况是你想阻止不必要的更新。
强制更新
如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。
你可能还没有留意到数组或对象的变更检测注意事项，或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态。
然而，如果你已经做到了上述的事项仍然发现在极少数的情况下需要手动强制更新，
那么你可以通过 $forceUpdate 来做这件事。
通过 v-once 创建低开销的静态组件
渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的时候你可能有一个组件，这个组件包含了大量静态内容。
在这种情况下，你可以在根元素上添加 v-once 特性以确保这些内容只计算一次然后缓存起来，就像这样：
Vue.component('terms-of-service', { template: ` <div v-once> <h1>Terms of Service</h1> ... a lot of static content ... </div> ` }) |
再说一次，试着不要过度使用这个模式。当你需要渲染大量静态内容时，极少数的情况下它会给你带来便利，除非你非常留意渲染变慢了，不然它完全是没有必要的——再加上它在后期会带来很多困惑。例如，设想另一个开发者并不熟悉 v-once或漏看了它在模板中，他们可能会花很多个小时去找出模板为什么无法正确更新的原因。
未完待续,下一章节,つづく