Vue中的组件

什么是组件？

组件可以扩展 HTML 元素，封装可重用的代码。

使用组件

注册

• 全局注册

Vue.component(tagName, options)

• 局部注册
  通过Vue实例的components属性注册，只在父模板中可用。

DOM模板解析

像一些元素 <ul>、<ol>、<table>、<select> 限制了能被它包裹的元素，而一些像 <option> 这样的元素只能出现在某些其它元素内部。需要使用特殊的 is 属性：

<table>
  <tr is="my-row"></tr>
</table>

data为什么必须是函数？

原因

在同一父模板中重复使用一个组件时，为避免不同组件之间共享同一个 data，需要为每个组件返回全新的 data 对象。

原理

注册组件的本质是建立一个组件构造器的引用。使用组件才是真正创建一个组件实例。

组件之间的通信

父子组件通信

父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。

单项数据流

prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态。

子组件修改prop 中数据的情形

1. prop 作为初始值传入后，子组件想把它当作局部数据来用；
2. prop 作为初始值传入，由子组件处理成其它数据输出。

解决方法

1. 定义一个局部变量，并用 prop 的值初始化它
2. 定义一个计算属性，处理 prop 的值并返回。

非父子组件通信

使用状态管理模式。

slot 内容分发

• 为了让组件可以组合，使用特殊的 <slot> 元素作为原始内容的插槽。
• 父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。分发内容是在父作用域内编译。
• <slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。仍然可以有一个匿名 slot，它是默认 slot，作为找不到匹配的内容片段的备用插槽。

动态组件

• 通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。
• 如果把切换出去的组件保留在内存中，keep-alive可以保留它的状态或避免重新渲染。