再战Vue官网-找出知识盲点（2）

1.vuejs.org/v2/guide/components-custom-events.html">自定义事件

事件名
不同于组件和 prop，事件名不存在任何自动化的大小写转换。而是触发的事件名需要完全匹配监听这个事件所用的名称。v-on 事件监听器在 DOM 模板中会被自动转换为全小写 (因为 HTML 是大小写不敏感的)，所以 v-on:myEvent 将会变成 v-on:myevent——导致 myEvent 不可能被监听到。

自定义组件的 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)"
    >
})

.sync 修饰符 2.3.0+ 新增

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>

注意带有 .sync 修饰符的 v-bind 不能和表达式一起使用 (例如 v-bind:title.sync=”doc.title + ‘!’” 是无效的)。取而代之的是，你只能提供你想要绑定的属性名，类似 v-model。

2.vuejs.org/v2/guide/components-slots.html">插槽

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的特性

具名插槽

  <template v-slot:default>或者不写slot就是默认
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </template>
  <template v-slot:footer>
    <p>Here's some contact info</p>
  </template>

  <slot></slot>
  <slot name="footer"></slot>

注意 v-slot 只能添加在一个 <template> 上 (只有一种例外情况:当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。)，这一点和已经废弃的 slot 特性不同。

作用域插槽
父级的插槽内容中可访问到子组件内对应slot传过来的数据
绑定在 <slot> 元素上的特性被称为插槽 prop

子组件
<span>
  <slot v-bind:user="user">
    {{ user.lastName }}
  </slot>
</span>
父组件
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>
</current-user>

独占默认插槽的缩写语法
当被提供的内容只有默认插槽时，组件的标签才可以被当作插槽的模板来使用。

<current-user v-slot:default="slotProps">
  {{ slotProps.user.firstName }}
</current-user>
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
</current-user>这个和上面是相同的


注意默认插槽的缩写语法不能和具名插槽混用，因为它会导致作用域不明确：
<!-- 无效，会导致警告 -->
<current-user v-slot="slotProps">
  {{ slotProps.user.firstName }}
  <template v-slot:other="otherSlotProps">
    slotProps is NOT available here
  </template>
</current-user>

只要出现多个插槽，请始终为所有的插槽使用完整的基于 <template> 的语法：
<current-user>
  <template v-slot:default="slotProps">
    {{ slotProps.user.firstName }}
  </template>

  <template v-slot:other="otherSlotProps">
    ...
  </template>
</current-user>

解构插槽 Prop

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

这样可以使模板更简洁，尤其是在该插槽提供了多个 prop 的时候。它同样开启了 prop 重命名等其它可能，例如将 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>

动态插槽名 2.6.0 新增

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

具名插槽的缩写2.6.0 新增
即把参数之前的所有内容 (v-slot:) 替换为字符 #。例如 v-slot:header 可以被重写为 #header：

  <template #header>
    <h1>Here might be a page title</h1>
  </template>

废弃了的语法(slot和slot-sope)

  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>
  <h1 slot="header">Here might be a page title</h1>


  <template slot-scope="slotProps">
    {{ slotProps.msg }}
  </template>
  <span slot-scope="slotProps">
    {{ slotProps.msg }}
  </span>

3.vuejs.org/v2/guide/components-edge-cases.html">处理边界情况

依赖注入
provide 选项允许我们指定我们想要提供给后代组件的数据/方法。在这个例子中，就是内部的 getMap 方法：

provide: function () {
  return {
    getMap: this.getMap
  }
}

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

inject: ['getMap']

provide所提供的属性是非响应式的

递归组件
组件是可以在它们自己的模板中调用自身的。不过它们只能通过 name 选项来做这件事

在本地注册组件的时候，你可以使用 webpack 的异步 import：

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

通过 v-once 创建低开销的静态组件