什么是组件?
组件可以扩展 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可以保留它的状态或避免重新渲染。