什么是组件？
组件可以扩展 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 中数据的情形
- prop 作为初始值传入后，子组件想把它当作局部数据来用；
- prop 作为初始值传入，由子组件处理成其它数据输出。
解决方法
- 定义一个局部变量，并用 prop 的值初始化它
- 定义一个计算属性，处理 prop 的值并返回。
非父子组件通信
使用状态管理模式。
slot 内容分发
- 为了让组件可以组合，使用特殊的 <slot> 元素作为原始内容的插槽。
- 父组件模板的内容在父组件作用域内编译；子组件模板的内容在子组件作用域内编译。分发内容是在父作用域内编译。
- <slot> 元素可以用一个特殊的属性 name 来配置如何分发内容。仍然可以有一个匿名 slot，它是默认 slot，作为找不到匹配的内容片段的备用插槽。
动态组件
- 通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，我们让多个组件可以使用同一个挂载点，并动态切换。
- 如果把切换出去的组件保留在内存中，keep-alive可以保留它的状态或避免重新渲染。
网友评论