【Vue】 使用中的注意事项（深入了解组件）：13.插槽 14.动态组件 & 异步组件 15.处理边界情况

插槽

可以利用 <slot> 插槽来合成组件。
如果 <navigation-link> 没有包含一个 <slot> 元素，则该组件起始标签和结束标签之间的任何内容都会被抛弃。

该插槽跟模板的其它地方一样可以访问相同的实例属性 (也就是相同的“作用域”)，而不能访问 <navigation-link> 的作用域。例如 url 是访问不到的：

<navigation-link url="/profile">
  Clicking here will send you to: {{ url }}
  <!--
  这里的 `url` 会是 undefined，因为 "/profile" 是
  _传递给_ <navigation-link> 的而不是
  在 <navigation-link> 组件*内部*定义的。
  -->
</navigation-link>

作为一条规则，请记住：

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。即插槽能够访问父级模板中编译的内容而不能访问传递给父级模板的内容

后备内容
<slot></slot>内的内容为后备内容（默认内容），如<slot>我是后备内容</slot>

具名插槽
一个不带 name 的 <slot> 出口会带有隐含的名字“default”。
现在 <template> 元素中的所有内容都将会被传入相应的插槽。任何没有被包裹在带有 v-slot 的 <template> 中的内容都会被视为默认插槽的内容。
然而，如果你希望更明确一些，仍然可以在一个 <template> 中包裹默认插槽的内容v-slot:default

注意 v-slot 只能添加在一个 <template> 上 (只有一种例外情况)

作用域插槽
绑定在 <slot> 元素上的特性被称为插槽 prop。
例如:

组件定义时：
<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>

组件使用时：在父级作用域中，我们可以给 v-slot 带一个值来定义我们提供的插槽 prop 的名字
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

默认插槽的缩写语法:

<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>

注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确;只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法

解构插槽 Prop:

<current-user v-slot="{ user }">
  {{ user.firstName }}
</current-user>

将 user 重命名为 person
<current-user v-slot="{ user: person }">
  {{ person.firstName }}
</current-user>

定义后备内容，用于插槽 prop 是 undefined 的情形
<current-user v-slot="{ user = { firstName: 'Guest' } }">
  {{ user.firstName }}
</current-user>

动态插槽名
动态指令参数也可以用在 v-slot 上，来定义动态的插槽名：

<base-layout>
  <template v-slot:[dynamicSlotName]>
    ...
  </template>
</base-layout>

具名插槽的缩写
v-slot:header 可以被重写为 #header
该缩写只在其有参数的时候才可用

---

---

---

动态组件 & 异步组件

在动态组件上使用 keep-alive

我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 <keep-alive> 元素将其动态组件包裹起来。

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

注意这个 <keep-alive> 要求被切换到的组件都有自己的名字，不论是通过组件的 name 选项还是局部/全局注册。

异步组件
Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。
一个推荐的做法是将异步组件和 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')
  }
})

处理加载状态
这里的异步组件工厂函数也可以返回一个如下格式的对象：

const AsyncComponent = () => ({
  // 需要加载的组件 (应该是一个 `Promise` 对象)
  component: import('./MyComponent.vue'),
  // 异步组件加载时使用的组件
  loading: LoadingComponent,
  // 加载失败时使用的组件
  error: ErrorComponent,
  // 展示加载时组件的延时时间。默认值是 200 (毫秒)
  delay: 200,
  // 如果提供了超时时间且组件加载也超时了，
  // 则使用加载失败时使用的组件。默认值是：`Infinity`
  timeout: 3000
})

---

---

---

处理边界情况

这里记录的都是和处理边界情况有关的功能，即一些需要对 Vue 的规则做一些小调整的特殊情况。不过注意这些功能都是有劣势或危险的场景的。所以当你使用每个功能的时候请稍加留意。

访问根实例:
在每个 new Vue 实例的子组件中，其根实例可以通过 $root 属性进行访问。

访问父级组件实例:
和 $root 类似，$parent 属性可以用来从一个子组件访问父组件的实例。

访问子组件实例或子元素:
你可以通过 ref 特性为这个子组件赋予一个 ID 引用。例如：

<base-input ref="usernameInput"></base-input>

现在在你已经定义了这个 ref 的组件里，你可以使用：

this.$refs.usernameInput

来访问这个 <base-input> 实例
注意：$refs 只会在组件渲染完成之后生效，并且它们不是响应式的。这仅作为一个用于直接操作子组件的“逃生舱”——你应该避免在模板或计算属性中访问 $refs

依赖注入
用于访问父级组件
provide 选项允许我们指定我们想要提供给后代组件的数据/方法。

//父级或父级的父级。。。。组件
provide: function () {
  return {
    getMap: this.getMap
  }
}

然后在任何后代组件里，我们都可以使用 inject 选项来接收指定的我们想要添加在这个实例上的属性：

//任何的后代组件
inject: ['getMap']

程序化的事件侦听器

• 通过 $on(eventName, eventHandler) 侦听一个事件
• 通过 $once(eventName, eventHandler) 一次性侦听一个事件
• 通过 $off(eventName, eventHandler) 停止侦听一个事件

mounted: function () {   //当挂载完毕的时候，创建Pikaday ，并执行销毁的监听
  var picker = new Pikaday({
    field: this.$refs.input,
    format: 'YYYY-MM-DD'
  })

  this.$once('hook:beforeDestroy', function () {
    picker.destroy()
  })
}

循环引用
递归组件：请确保递归调用是条件性的 (例如使用一个最终会得到 false 的 v-if)
组件之间的循环引用：可以在组件A中等到生命周期钩子 beforeCreate 时去注册组件B
或者 在本地注册组件的时候，你可以使用 webpack 的异步 import

components: {
  TreeFolderContents: () => import('./tree-folder-contents.vue')
}

模板定义的替代品

内联模板 ：内联模板需要定义在 Vue 所属的 DOM 元素内。当 inline-template 这个特殊的特性出现在一个子组件上时，这个组件将会使用其里面的内容作为模板，而不是将其作为被分发的内容。这使得模板的撰写工作更加灵活。

X-Template :另一个定义模板的方式是在一个 <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'
})

X-Template 需要定义在 Vue 所属的 DOM 元素外。

控制更新

①强制更新：
如果你发现你自己需要在 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>
  `
})