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可以保留它的状态或避免重新渲染。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 此文基于官方文档,里面部分例子有改动,加上了一些自己的理解 什么是组件? 组件(Component)是 Vue.j...
    陆志均阅读 3,949评论 5 14
  • 什么是组件 组件(Component)是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用...
    angelwgh阅读 820评论 0 0
  • 1.安装 可以简单地在页面引入Vue.js作为独立版本,Vue即被注册为全局变量,可以在页面使用了。 如果希望搭建...
    Awey阅读 11,300评论 4 129
  • 序 今年大前端的概念一而再再而三的被提及,那么大前端时代究竟是什么呢?大前端这个词最早是因为在阿里内部有很多前端开...
    一缕殇流化隐半边冰霜阅读 11,374评论 19 92
  • 这篇笔记主要包含 Vue 2 不同于 Vue 1 或者特有的内容,还有我对于 Vue 1.0 印象不深的内容。关于...
    云之外阅读 5,180评论 0 29

友情链接更多精彩内容