从小白开始学vue学习笔记（三）——组件篇
目录
一、组件注册
1、组件名
2、组件名大小写
使用 kebab-case
使用 PascalCase
3、全局注册
4、局部注册
5、模块系统
（1）在模块系统中局部注册
（2）基础组件的自动化全局注册
二、Prop
1、Prop 的大小写 (camelCase vs kebab-case)
2、Prop类型
3、传递静态或动态Prop
（1）传入一个数字
（2）传入一个布尔值
（3）传入一个数组
（4）传入一个对象
（5）传入一个对象的所有属性
4、单向数据流
5、Prop验证
（1）类型检查
6、非prop的特性
（1）替换/合并已有属性
（2）禁用特性传承
三、自定义事件
1、事件名
2、自定义组件的v-model
3、将原生事件绑定到组件
4、.sync修饰符
四、插槽
1、插槽内容
2、编译作用域
3、后备内容
4、具名插槽
5、作用域插槽
（1）独占默认插槽的缩写语法
（2）解构插槽prop
6、动态插槽名
（1）具名插槽的缩写
7、其他示例
8、废弃了的语法
（1）带slot特性的具名插槽
（2）带slot-scope特性的作用域插槽
五、动态组件 & 异步组件
1、在动态组件上使用keep-alive
2、异步组件
3、加载处理状态
六、处理边界情况
1、访问元素和组件
（1）访问根实例$root
（2）访问父级组件实例$parent
（3）访问子组件实例或者子元素 ref="name" $refs.name
（4）依赖注入provide inject
2、程序化的事件侦听器
3、循环引用
（1）递归组件
（2）组件间的循环引用
4、模板定义的替代品
（1）内联模板
（2）X-Template
5、控制更新
（1）强制更新
（2）通过v-once创建低开销的静态组件
一、组件注册
1、组件名
在注册一个组件的时候，我们始终需要给它一个名字。比如在全局注册的时候我们已经看到了：
Vue.component('my-component-name', { /* ... */ })该组件名就是 Vue.component 的第一个参数。
你给予组件的名字可能依赖于你打算拿它来做什么。当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，我们强烈推荐遵循 W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。这会帮助你避免和当前以及未来的 HTML 元素相冲突。
一个有效的自定义的元素名称是字符的序列 。
组件名风格参考
2、组件名大小写
定义组件名的方式有两种：
使用 kebab-case
Vue.component('my-component-name', { /* ... */ })当使用 kebab-case (短横线分隔命名) 定义一个组件时，你也必须在引用这个自定义元素时使用 kebab-case，例如
使用 PascalCase
Vue.component('MyComponentName', { /* ... */ })当使用 PascalCase (首字母大写命名) 定义一个组件时，你在引用这个自定义元素时两种命名法都可以使用。也就是说
HTML模板和字符串模板:
1、
HTML模板(dom模板)：直接在HTML页面挂载的模板,就是原先写在页面上的，能被浏览器识别的HTML结构，会在一加载就被浏览器渲染，然后js获取dom节点的内容， 形成dom模板。（即非字符串模板）
字符串模板：可能原先放在服务器上的，script标签或者js的字符串里，原先不参与页面渲染的一串字符。
2、Props属性：HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 props属性需要转换为相对应的 kebab-case (短横线分隔式命名)：
（1）、HTML模板：
Vue.component('child', {
// 在 JavaScript 中使用 camelCase
props: ['myMessage'],
template: '{{ myMessage }}'
})
（2）、字符串模板：
3、全局注册
到目前为止，我们只用过 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' })
在所有子组件中也是如此，也就是说这三个组件在各自内部也都可以相互使用。
4、局部注册
全局注册往往是不够理想的。比如，如果你使用一个像 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 的缩写，即这个变量名同时是：
- 用在模板中的自定义元素的名称
- 包含了这个组件选项的变量名
5、模块系统
如果你没有通过 import/require 使用一个模块系统，也许可以暂且跳过这个章节。如果你使用了，那么我们会为你提供一些特殊的使用说明和注意事项。
（1）在模块系统中局部注册
如果你还在阅读，说明你使用了诸如 Babel 和 webpack 的模块系统。在这些情况下，我们推荐创建一个 components 目录，并将每个组件放置在其各自的文件中。
然后你需要在局部注册之前导入每个你想使用的组件。例如，在一个假设的 ComponentB.js 或 ComponentB.vue 文件中：
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'
export default {
components: {
ComponentA,
ComponentC
},
// ...
}现在 ComponentA 和 ComponentC 都可以在 ComponentB 的模板中使用了。
（2）基础组件的自动化全局注册
可能你的许多组件只是包裹了一个输入框或按钮之类的元素，是相对通用的。我们有时候会把它们称为基础组件，它们会在各个组件中被频繁的用到。
所以会导致很多组件里都会有一个包含基础组件的长列表：
import BaseButton from './BaseButton.vue'
import BaseIcon from './BaseIcon.vue'
import BaseInput from './BaseInput.vue'
export default {
components: {
BaseButton,
BaseIcon,
BaseInput
}
}而只是用于模板中的一小部分：
幸好如果你使用了 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
.split('/')
.pop()
.replace(/\.\w+$/, '')
)
)
// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的，
// 那么就会优先使用 `.default`，
// 否则回退到使用模块的根。
componentConfig.default || componentConfig
)
})记住全局注册的行为必须在根 Vue 实例 (通过 new Vue) 创建之前发生。这里有一个真实项目情景下的示例。
二、Prop
1、Prop 的大小写 (camelCase vs kebab-case)
HTML 中的特性名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名：
Vue.component('blog-post', {
// 在 JavaScript 中是 camelCase 的
props: ['postTitle'],
template: '{{ postTitle }}
'
})
重申一次，如果你使用字符串模板，那么这个限制就不存在了。
ES6中的字符串模板：
两个反单引号 `` 包裹的字符窜就是字符串模板。在字符串模板中可以使用 ${}符号 来引用变量
console.log(`I bought an iphone ${number}s`); // ` : 是反单引号; ${}:引用变量
//输出： I bought an iphone 7s
2、Prop类型
到这里，我们只看到了以字符串数组形式列出的 prop：
props: ['title', 'likes', 'isPublished', 'commentIds', 'author']但是，通常你希望每个 prop 都有指定的值类型。这时，你可以以对象形式列出 prop，这些属性的名称和值分别是 prop 各自的名称和类型：
props: {
title: String,
likes: Number,
isPublished: Boolean,
commentIds: Array,
author: Object,
callback: Function,
contactsPromise: Promise // or any other constructor
}这不仅为你的组件提供了文档，还会在它们遇到错误的类型时从浏览器的 JavaScript 控制台提示用户。你会在这个页面接下来的部分看到类型检查和其它 prop 验证。
3、传递静态或动态Prop
像这样，你已经知道了可以像这样给 prop 传入一个静态的值：
你也知道 prop 可以通过 v-bind 动态赋值，例如：
在上述两个示例中，我们传入的值都是字符串类型的，但实际上任何类型的值都可以传给一个 prop。
（1）传入一个数字
即便 `42` 是静态的，我们仍然需要 `v-bind` 来告诉 Vue
这是一个 JavaScript 表达式而不是一个字符串。
（2）传入一个布尔值
包含该 prop 没有值的情况在内，都意味着 `true`。
（3）传入一个数组
（4）传入一个对象
（5）传入一个对象的所有属性
如果你想要将一个对象的所有属性都作为 prop 传入，你可以使用不带参数的 v-bind (取代 v-bind:prop-name)。例如，对于一个给定的对象 post：
post: {
id: 1,
title: 'My Journey with Vue'
}下面的模板：
等价于：
4、单向数据流
所有的 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 来说，在子组件中改变这个对象或数组本身将会影响到父组件的状态。
5、Prop验证
我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。
为了定制 prop 的验证方式，你可以为 props 中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如：
Vue.component('my-component', {
props: {
// 基础的类型检查 (`null` 和 `undefined` 会通过任何类型验证)
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 函数中是不可用的。
（1）类型检查
type 可以是下列原生构造函数中的一个：
StringNumberBooleanArrayObjectDateFunctionSymbol
额外的，type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认。例如，给定下列现成的构造函数：
function Person (firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}你可以使用：
Vue.component('blog-post', {
props: {
author: Person
}
})来验证 author prop 的值是否是通过 new Person 创建的。
6、非prop的特性
一个非 prop 特性是指传向一个组件，但是该组件并没有相应 prop 定义的特性。
因为显式定义的 prop 适用于向一个子组件传入信息，然而组件库的作者并不总能预见组件会被用于怎样的场景。这也是为什么组件可以接受任意的特性，而这些特性会被添加到这个组件的根元素上。
例如，想象一下你通过一个 Bootstrap 插件使用了一个第三方的 上用到一个 data-date-picker 特性。我们可以将这个特性添加到你的组件实例上：
然后这个 data-date-picker="activated" 特性就会自动添加到
（1）替换/合并已有属性
想象一下
为了给我们的日期选择器插件定制一个主题，我们可能需要像这样添加一个特别的类名：
在这种情况下，我们定义了两个不同的 class 的值：
form-control，这是在组件的模板内设置好的date-picker-theme-dark，这是从组件的父级传入的
对于绝大多数特性来说，从外部提供给组件的值会替换掉组件内部设置好的值。所以如果传入 type="text" 就会替换掉 type="date" 并把它破坏！庆幸的是，class 和 style 特性会稍微智能一些，即两边的值会被合并起来，从而得到最终的值：form-control date-picker-theme-dark。
（2）禁用特性传承
如果你不希望组件的根元素继承特性，你可以在组件的选项中设置 inheritAttrs: false。例如：
Vue.component('my-component', {
inheritAttrs: false,
// ...
})这尤其适合配合实例的 $attrs 属性使用，该属性包含了传递给一个组件的特性名和特性值，例如：
{
required: true,
placeholder: 'Enter your username'
}有了 inheritAttrs: false 和 $attrs，你就可以手动决定这些特性会被赋予哪个元素。在撰写基础组件的时候是常会用到的：
Vue.component('base-input', {
inheritAttrs: false,
props: ['label', 'value'],
template: `
`
})注意 inheritAttrs: false 选项不会影响 style 和 class 的绑定。
这个模式允许你在使用基础组件的时候更像是使用原始的 HTML 元素，而不会担心哪个元素是真正的根元素：
三、自定义事件
1、事件名
不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。举个例子，如果触发一个 camelCase 名字的事件：
this.$emit('myEvent')则监听这个名字的 kebab-case 版本是不会有任何效果的：
不同于组件和 prop，事件名不会被用作一个 JavaScript 变量名或属性名，所以就没有理由使用 camelCase 或 PascalCase 了。并且 v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。
因此，我们推荐你始终使用 kebab-case 的事件名。
2、自定义组件的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: `
`
})现在在这个组件上使用 v-model 的时候：
这里的 lovingVue 的值将会传入这个名为 checked 的 prop。同时当 change 事件并附带一个新的值的时候，这个 lovingVue 的属性将会被更新。
注意你仍然需要在组件的
props选项里声明checked这个 prop。
3、将原生事件绑定到组件
你可能有很多次想要在一个组件的根元素上直接监听一个原生事件。这时，你可以使用 v-on 的 .native 修饰符：
在有的时候这是很有用的，不过在你尝试监听一个类似 的非常特定的元素时，这并不是个好主意。比如上述 元素：
这时，父级的 .native 监听器将静默失败。它不会产生任何报错，但是 onFocus 处理函数不会如你预期地被调用。
$attrs–继承所有的父组件属性（除了prop传递的属性、class 和 style ）
inheritAttrs：默认值true,继承所有的父组件属性（除props的特定绑定）作为普通的HTML特性应用在子组件的根元素上，如果你不希望组件的根元素继承特性设置inheritAttrs: false,但是class属性会继承
$listeners–属性，它是一个对象，里面包含了作用在这个组件上的所有监听器，你就可以配合 v-on=”$listeners” 将所有的事件监听器指向这个组件的某个特定的子元素。
为了解决这个问题，Vue 提供了一个 $listeners 属性，它是一个对象，里面包含了作用在这个组件上的所有监听器。例如：
{
focus: function (event) { /* ... */ }
input: function (value) { /* ... */ },
}有了这个 $listeners 属性，你就可以配合 v-on="$listeners" 将所有的事件监听器指向这个组件的某个特定的子元素。对于类似 的你希望它也可以配合 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: `
`
})现在 元素一样使用了：所有跟它相同的特性和监听器的都可以工作。
4、.sync修饰符
2.3.0+ 新增
在有些情况下，我们可能需要对一个 prop 进行“双向绑定”。不幸的是，真正的双向绑定会带来维护上的问题，因为子组件可以修改父组件，且在父组件和子组件都没有明显的改动来源。
这也是为什么我们推荐以 update:myPropName 的模式触发事件取而代之。举个例子，在一个包含 title prop 的假设的组件中，我们可以用以下方法表达对其赋新值的意图：
this.$emit('update:title', newTitle)然后父组件可以监听那个事件并根据需要更新一个本地的数据属性。例如：
为了方便起见，我们为这种模式提供一个缩写，即 .sync 修饰符：
注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。
当我们用一个对象同时设置多个 prop 的时候，也可以将这个 .sync 修饰符和 v-bind 配合使用：
这样会把 doc 对象中的每一个属性 (如 title) 都作为一个独立的 prop 传进去，然后各自添加用于更新的 v-on 监听器。
将 v-bind.sync 用在一个字面量的对象上，例如 v-bind.sync=”{ title: doc.title }”，是无法正常工作的，因为在解析一个像这样的复杂表达式的时候，有很多边缘情况需要考虑。
四、插槽
1、插槽内容
Vue 实现了一套内容分发的 API，这套 API 的设计灵感源自 Web Components 规范草案，将
它允许你像这样合成组件：
Your Profile
然后你在
当组件渲染的时候，
Your Profile
甚至其它的组件：
如果
2、编译作用域
当你想在一个插槽中使用数据时，例如：
Logged in as {{ user.name }}
该插槽跟模板的其它地方一样可以访问相同的实例属性 (也就是相同的“作用域”)，而不能访问 url 是访问不到的：
Clicking here will send you to: {{ url }}
作为一条规则，请记住：
父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。
3、后备内容
有时为一个插槽设置具体的后备 (也就是默认的) 内容是很有用的，它只会在没有提供内容的时候被渲染。例如在一个
我们可能希望这个 内绝大多数情况下都渲染文本“Submit”。为了将“Submit”作为后备内容，我们可以将它放在
现在当我在一个父级组件中使用
后备内容“Submit”将会被渲染：
但是如果我们提供内容：
Save
则这个提供的内容将会被渲染从而取代后备内容：
4、具名插槽
自 2.6.0 起有所更新。已废弃的使用
slot特性的语法在这里。
有时我们需要多个插槽。例如对于一个带有如下模板的
对于这样的情况，name。这个特性可以用来定义额外的插槽：
一个不带 name 的
在向具名插槽提供内容的时候，我们可以在一个 元素上使用 v-slot 指令，并以 v-slot 的参数的形式提供其名称：
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
现在 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 中的内容都会被视为默认插槽的内容。
然而，如果你希望更明确一些，仍然可以在一个 中包裹默认插槽的内容：
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
任何一种写法都会渲染出：
Here might be a page title
A paragraph for the main content.
And another one.
注意 v-slot 只能添加在一个 上 (只有一种例外情况，下面会讲)，这一点和已经废弃的 slot 特性不同。
5、作用域插槽
自 2.6.0 起有所更新。已废弃的使用
slot-scope特性的语法在这里。
有时让插槽内容能够访问子组件中才有的数据是很有用的(父访问子)。例如，设想一个带有如下模板的
{{ user.lastName }}
我们想让它的后备内容显示用户的名，以取代正常情况下用户的姓，如下：
{{ user.firstName }}
然而上述代码不会正常工作，因为只有 user 而我们提供的内容是在父级渲染的。
为了让 user 在父级的插槽内容中可用，我们可以将 user 作为
{{ user.lastName }}
绑定在 v-slot 带一个值来定义我们提供的插槽 prop 的名字：
{{ slotProps.user.firstName }}
Vue.component("current-user", {
template: `
{{ user.lastName }}
`,
data: function() {
return {
user: {
firstName: "firstName",
lastName: "lastName"
}
}
}
})
在这个例子中，我们选择将包含所有插槽 prop 的对象命名为 slotProps，但你也可以使用任意你喜欢的名字。
（1）独占默认插槽的缩写语法
在上述情况下，当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。这样我们就可以把 v-slot 直接用在组件上：
{{ slotProps.user.firstName }}
这种写法还可以更简单。就像假定未指明的内容对应默认插槽一样，不带参数的 v-slot 被假定对应默认插槽：
{{ slotProps.user.firstName }}
注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确：
{{ slotProps.user.firstName }}
slotProps is NOT available here
只要出现多个插槽，请始终为所有的插槽使用完整的基于 的语法：
{{ slotProps.user.firstName }}
...
（2）解构插槽prop
作用域插槽的内部工作原理是将你的插槽内容包括在一个传入单个参数的函数里：
function (slotProps) {
// 插槽内容
}这意味着 v-slot 的值实际上可以是任何能够作为函数定义中的参数的 JavaScript 表达式。所以在支持的环境下 (单文件组件或现代浏览器)，你也可以使用 ES2015 解构来传入具体的插槽 prop，如下：
{{ user.firstName }}
这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 user 重命名为 person：
{{ person.firstName }}
你甚至可以定义后备内容，用于插槽 prop 是 undefined 的情形：
{{ user.firstName }}
6、动态插槽名
2.6.0 新增
动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：
...
（1）具名插槽的缩写
2.6.0 新增
跟 v-on 和 v-bind 一样，v-slot 也有缩写，即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
然而，和其它指令一样，该缩写只在其有参数的时候才可用。这意味着以下语法是无效的：
{{ user.firstName }}
如果你希望使用缩写的话，你必须始终以明确插槽名取而代之：
{{ user.firstName }}
7、其他示例
插槽 prop 允许我们将插槽转换为可复用的模板，这些模板可以基于输入的 prop 渲染出不同的内容。这在设计封装数据逻辑同时允许父级组件自定义部分布局的可复用组件时是最有用的。
例如，我们要实现一个
-
{{ todo.text }}
我们可以将每个 todo 作为父级组件的插槽，以此通过父级组件对其进行控制，然后将 todo 作为一个插槽 prop 进行绑定：
-
{{ todo.text }}
现在当我们使用 作为替代方案，并且可以从子组件获取数据：
✓
{{ todo.text }}
这只是作用域插槽用武之地的冰山一角。想了解更多现实生活中的作用域插槽的用法，我们推荐浏览诸如 Vue Virtual Scroller、Vue Promised 和 Portal Vue 等库。
8、废弃了的语法
v-slot指令自 Vue 2.6.0 起被引入，提供更好的支持slot和slot-scope特性的 API 替代方案。v-slot完整的由来参见这份 RFC。在接下来所有的 2.x 版本中slot和slot-scope特性仍会被支持，但已经被官方废弃且不会出现在 Vue 3 中。
（1）带slot特性的具名插槽
自 2.6.0 起被废弃。新推荐的语法请查阅这里。
在 上使用特殊的 slot 特性，可以将内容从父级传给具名插槽 (把这里提到过的
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
或者直接把 slot 特性用在一个普通元素上：
Here might be a page title
A paragraph for the main content.
And another one.
Here's some contact info
这里其实还有一个未命名插槽，也就是默认插槽，捕获所有未被匹配的内容。上述两个示例的 HTML 渲染结果均为：
Here might be a page title
A paragraph for the main content.
And another one.
（2）带slot-scope特性的作用域插槽
自 2.6.0 起被废弃。新推荐的语法请查阅这里。
在 上使用特殊的 slot-scope 特性，可以接收传递给插槽的 prop (把这里提到过的
{{ slotProps.msg }}
这里的 slot-scope 声明了被接收的 prop 对象会作为 slotProps 变量存在于 作用域中。你可以像命名 JavaScript 函数参数一样随意命名 slotProps。
这里的 slot="default" 可以被忽略为隐性写法：
{{ slotProps.msg }}
slot-scope 特性也可以直接用于非 元素 (包括组件)：
{{ slotProps.msg }}
slot-scope 的值可以接收任何有效的可以出现在函数定义的参数位置上的 JavaScript 表达式。这意味着在支持的环境下 (单文件组件或现代浏览器)，你也可以在表达式中使用 ES2015 解构，如下：
{{ msg }}
使用这里描述过的 slot-scope 的代码是：
✓
{{ todo.text }}
五、动态组件 & 异步组件
1、在动态组件上使用keep-alive
我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件：
当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。例如我们来展开说一说这个多标签界面：
你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例。
重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个
来看看修改后的结果：
现在这个 Posts 标签保持了它的状态 (被选中的文章) 甚至当它未被渲染时也是如此。你可以在这个 fiddle 查阅到完整的代码。
注意这个 name 选项还是局部/全局注册。
.tab-button {
padding: 6px 10px;
border-top-left-radius: 3px;
border-top-right-radius: 3px;
border: 1px solid #ccc;
cursor: pointer;
background: #f0f0f0;
margin-bottom: -1px;
margin-right: -1px;
}
.tab-button:hover {
background: #e0e0e0;
}
.tab-button.active {
background: #e0e0e0;
}
.tab {
border: 1px solid #ccc;
padding: 10px;
}
.posts-tab {
display: flex;
}
.posts-sidebar {
max-width: 40vw;
margin: 0;
padding: 0 10px 0 0;
list-style-type: none;
border-right: 1px solid #ccc;
}
.posts-sidebar li {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
cursor: pointer;
}
.posts-sidebar li:hover {
background: #eee;
}
.posts-sidebar li.selected {
background: lightblue;
}
.selected-post-container {
padding-left: 10px;
}
.selected-post > :first-child {
margin-top: 0;
padding-top: 0;
}Vue.component('tab-posts', {
data: function () {
return {
posts: [
{
id: 1,
title: 'Cat Ipsum',
content: 'Dont wait for the storm to pass, dance in the rain kick up litter decide to want nothing to do with my owner today demand to be let outside at once, and expect owner to wait for me as i think about it cat cat moo moo lick ears lick paws so make meme, make cute face but lick the other cats. Kitty poochy chase imaginary bugs, but stand in front of the computer screen. Sweet beast cat dog hate mouse eat string barf pillow no baths hate everything stare at guinea pigs. My left donut is missing, as is my right loved it, hated it, loved it, hated it scoot butt on the rug cat not kitten around
'
},
{
id: 2,
title: 'Hipster Ipsum',
content: 'Bushwick blue bottle scenester helvetica ugh, meh four loko. Put a bird on it lumbersexual franzen shabby chic, street art knausgaard trust fund shaman scenester live-edge mixtape taxidermy viral yuccie succulents. Keytar poke bicycle rights, crucifix street art neutra air plant PBR&B hoodie plaid venmo. Tilde swag art party fanny pack vinyl letterpress venmo jean shorts offal mumblecore. Vice blog gentrify mlkshk tattooed occupy snackwave, hoodie craft beer next level migas 8-bit chartreuse. Trust fund food truck drinking vinegar gochujang.
'
},
{
id: 3,
title: 'Cupcake Ipsum',
content: 'Icing dessert soufflé lollipop chocolate bar sweet tart cake chupa chups. Soufflé marzipan jelly beans croissant toffee marzipan cupcake icing fruitcake. Muffin cake pudding soufflé wafer jelly bear claw sesame snaps marshmallow. Marzipan soufflé croissant lemon drops gingerbread sugar plum lemon drops apple pie gummies. Sweet roll donut oat cake toffee cake. Liquorice candy macaroon toffee cookie marzipan.
'
}
],
selectedPost: null
}
},
template: `
{{ selectedPost.title }}
Click on a blog title to the left to view it.
`
})
Vue.component('tab-archive', {
template: 'Archive component'
})
new Vue({
el: '#dynamic-component-demo',
data: {
currentTab: 'Posts',
tabs: ['Posts', 'Archive']
},
computed: {
currentTabComponent: function () {
return 'tab-' + this.currentTab.toLowerCase()
}
}
})2、异步组件
在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。例如：
Vue.component('async-example', function (resolve, reject) {
setTimeout(function () {
// 向 `resolve` 回调传递组件定义
resolve({
template: 'I am async!'
})
}, 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，以拥有内置的头等异步支持。
3、加载处理状态
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+ 版本。
六、处理边界情况
1、访问元素和组件
在绝大多数情况下，我们最好不要触达另一个组件实例内部或手动操作 DOM 元素。不过也确实在一些情况下做这些事情是合适的。
（1）访问根实例$root
在每个 new Vue 实例的子组件中，其根实例可以通过 $root 属性进行访问。例如，在这个根实例中：
// Vue 根实例
new Vue({
data: {
foo: 1
},
computed: {
bar: function () { /* ... */ }
},
methods: {
baz: function () { /* ... */ }
}
})所有的子组件都可以将这个实例作为一个全局 store 来访问或使用。
Vue.component('ex', {
template: `
{{this.$root.foo}}
`
})// 获取根组件的数据
this.$root.foo
// 写入根组件的数据
this.$root.foo = 2
// 访问根组件的计算属性
this.$root.bar
// 调用根组件的方法
this.$root.baz()对于 demo 或非常小型的有少量组件的应用来说这是很方便的。不过这个模式扩展到中大型应用来说就不然了。因此在绝大多数情况下，我们强烈推荐使用 Vuex 来管理应用的状态。
（2）访问父级组件实例$parent
和 $root 类似，$parent 属性可以用来从一个子组件访问父组件的实例。它提供了一种机会，可以在后期随时触达父级组件，以替代将数据以 prop 的方式传入子组件的方式。
在绝大多数情况下，触达父级组件会使得你的应用更难调试和理解，尤其是当你变更了父级组件的数据的时候。当我们稍后回看那个组件的时候，很难找出那个变更是从哪里发起的。
另外在一些可能适当的时候，你需要特别地共享一些组件库。举个例子，在和 JavaScript API 进行交互而不渲染 HTML 的抽象组件内，诸如这些假设性的 Google 地图组件一样：
这个 map 属性，所有的子组件都需要访问它。在这种情况下 this.$parent.getMap 的方式访问那个地图，以便为其添加一组标记。你可以在这里查阅这种模式。
Vue.component('google-map', {
data: function () {
return {
map: null
}
},
mounted: function () {
this.map = new google.maps.Map(this.$el, {
center: { lat: 0, lng: 0 },
zoom: 1
})
},
methods: {
getMap: function (found) {
var vm = this
function checkForMap () {
if (vm.map) {
found(vm.map)
} else {
setTimeout(checkForMap, 50)
}
}
checkForMap()
}
},
template: '请留意，尽管如此，通过这种模式构建出来的那个组件的内部仍然是容易出现问题的。比如，设想一下我们添加一个新的
那么在
var map = this.$parent.map || this.$parent.$parent.map很快它就会失控。这也是我们针对需要向任意更深层级的组件提供上下文信息时推荐依赖注入的原因。
（3）访问子组件实例或者子元素 ref="name" $refs.name
尽管存在 prop 和事件，有的时候你仍可能需要在 JavaScript 里直接访问一个子组件。为了达到这个目的，你可以通过 ref 特性为这个子组件赋予一个 ID 引用。例如：
现在在你已经定义了这个 ref 的组件里，你可以使用：
this.$refs.usernameInput来访问这个 ref 提供对内部这个指定元素的访问，例如：
甚至可以通过其父级组件定义方法：
methods: {
// 用来从父级组件聚焦输入框
focus: function () {
this.$refs.input.focus()
}
}这样就允许父级组件通过下面的代码聚焦
this.$refs.usernameInput.focus()当 ref 和 v-for 一起使用的时候，你得到的引用将会是一个包含了对应数据源的这些子组件的数组。
$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs。
示例代码：
父组件：
子组件：
{{msg}}
运行结果：
（4）依赖注入provide inject
在此之前，在我们描述访问父级组件实例的时候，展示过一个类似这样的例子：
在这个组件里，所有 getMap 方法，以便知道要跟哪个地图进行交互。不幸的是，使用 $parent 属性无法很好的扩展到更深层级的嵌套组件上。这也是依赖注入的用武之地，它用到了两个新的实例选项：provide 和 inject。
provide 选项允许我们指定我们想要提供给后代组件的数据/方法。在这个例子中，就是 getMap 方法：
provide: function () {
return {
getMap: this.getMap
}
}然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性：
inject: ['getMap']你可以在这里看到完整的示例。相比 $parent 来说，这个用法可以让我们在任意后代组件中访问 getMap，而不需要暴露整个 props 一样。
实际上，你可以把依赖注入看作一部分“大范围有效的 prop”，除了：
- 祖先组件不需要知道哪些后代组件使用它提供的属性
- 后代组件不需要知道被注入的属性来自哪里
然而，依赖注入还是有负面影响的。它将你应用程序中的组件与它们当前的组织方式耦合起来，使重构变得更加困难。同时所提供的属性是非响应式的。这是出于设计的考虑，因为使用它们来创建一个中心化规模化的数据跟使用 $root做这件事都是不够好的。如果你想要共享的这个属性是你的应用特有的，而不是通用化的，或者如果你想在祖先组件中更新所提供的数据，那么这意味着你可能需要换用一个像 Vuex 这样真正的状态管理方案了。
你可以在 API 参考文档学习更多关于依赖注入的知识。
2、程序化的事件侦听器
现在，你已经知道了 $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 可以了解到完整的代码。注意，即便如此，如果你发现自己不得不在单个组件里做很多建立和清理的工作，最好的方式通常还是创建更多的模块化组件。在这个例子中，我们推荐创建一个可复用的
想了解更多程序化侦听器的内容，请查阅实例方法 / 事件相关的 API。
注意 Vue 的事件系统不同于浏览器的 EventTarget API。尽管它们工作起来是相似的，但是 $emit、$on, 和 $off 并不是 dispatchEvent、addEventListener 和 removeEventListener 的别名。
3、循环引用
（1）递归组件
组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事：
name: 'unique-name-of-my-component'当你使用 Vue.component 全局注册一个组件时，这个全局的 ID 会自动设置为该组件的 name 选项。
Vue.component('unique-name-of-my-component', {
// ...
})稍有不慎，递归组件就可能导致无限循环：
name: 'stack-overflow',
template: '类似上述的组件将会导致“max stack size exceeded”错误，所以请确保递归调用是条件性的 (例如使用一个最终会得到 false 的 v-if)。
（2）组件间的循环引用
假设你需要构建一个文件目录树，像访达或资源管理器那样的。你可能有一个
{{ folder.name }}
还有一个
-
当你仔细观察的时候，你会发现这些组件在渲染树中互为对方的后代和祖先——一个悖论！当通过 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。”
在我们的例子中，把 beforeCreate 时去注册它：
beforeCreate: function () {
this.$options.components.TreeFolderContents = require('./tree-folder-contents.vue').default
}或者，在本地注册组件的时候，你可以使用 webpack 的异步 import：
components: {
TreeFolderContents: () => import('./tree-folder-contents.vue')
}这样问题就解决了！
4、模板定义的替代品
（1）内联模板
当 inline-template 这个特殊的特性出现在一个子组件上时，这个组件将会使用其里面的内容作为模板，而不是将其作为被分发的内容。这使得模板的撰写工作更加灵活。
These are compiled as the component's own template.
Not parent's transclusion content.
内联模板需要定义在 Vue 所属的 DOM 元素内。
不过，inline-template 会让模板的作用域变得更加难以理解。所以作为最佳实践，请在组件内优先选择 template 选项或 .vue 文件里的一个 元素来定义模板。
（2）X-Template
另一个定义模板的方式是在一个 x-template 需要定义在 Vue 所属的 DOM 元素外。 这些可以用于模板特别大的 demo 或极小型的应用，但是其它情况下请避免使用，因为这会将模板和该组件的其它定义分离开。 感谢 Vue 的响应式系统，它始终知道何时进行更新 (如果你用对了的话)。不过还是有一些边界情况，你想要强制更新，尽管表面上看响应式的数据没有发生改变。也有一些情况是你想阻止不必要的更新。 如果你发现你自己需要在 Vue 中做一次强制更新，99.9% 的情况，是你在某个地方做错了事。 你可能还没有留意到数组或对象的变更检测注意事项，或者你可能依赖了一个未被 Vue 的响应式系统追踪的状态。 然而，如果你已经做到了上述的事项仍然发现在极少数的情况下需要手动强制更新，那么你可以通过 渲染普通的 HTML 元素在 Vue 中是非常快速的，但有的时候你可能有一个组件，这个组件包含了大量静态内容。在这种情况下，你可以在根元素上添加 再说一次，试着不要过度使用这个模式。当你需要渲染大量静态内容时，极少数的情况下它会给你带来便利，除非你非常留意渲染变慢了，不然它完全是没有必要的——再加上它在后期会带来很多困惑。例如，设想另一个开发者并不熟悉
Vue.component('hello-world', {
template: '#hello-world-template'
})5、控制更新
（1）强制更新
$forceUpdate 来做这件事。（2）通过v-once创建低开销的静态组件
v-once 特性以确保这些内容只计算一次然后缓存起来，就像这样：Vue.component('terms-of-service', {
template: `
Terms of Service
... a lot of static content ...
v-once 或漏看了它在模板中，他们可能会花很多个小时去找出模板为什么无法正确更新。