VueJS Component 组件
-
什么是组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。组件是对特点功能代码(html,css,js)的封装, 通过组件的名字可以重复利用该组件中的代码。注意:组件的 template 模板必须有且只有一个根标签(所有内容必须由一个标签套起来)。
-
全局组件
语法:Vue.component("自定义标签的名字",{配置对象})全局组件的特点:- 全局组件可以在任何被挂着的标签中使用。
- 全局组件的配置对象中必须包含 template 属。
如果该组件的特定功能需要在任何被 Vue 实例挂载的标签中使用;推荐使用全局组件: -
-
组件中的数据必须是函数
组件中数据的定义:要注意的事项:- data 数据只能够以函数的形式返回,因为函数中可以写其他的业务代码。
- 只能够在各自的组件模板中使用各自的组件中的 data 数据。
- Vue 对象中的数据不能够在组件中使用,组件的数据也不能够在挂载的 html 标签上使用。
示例: -
组件中的 name 属性
在给子组件定义属性的时候,通常第一个属性就是 name,例如下面:定义 name 属性一般有三个方面的作用:- 为了方便在组件自身调用自身出现递归的时候便于调用。
- 单独取消某个页面的 keepalive 缓存时更好的调用。
- 使用 vue 工具进行查看网页结构的时候更好的查看网页结构。
-
组件中的 is 属性
我们通常使用 is 属性解决模板标签 bug 的问题。下面我们通过一个 table 标签的 bug 案例进行说明。我们先写一个简单的 Vue 实例,并创造一个 row 的组件,将它的模板 template 置为 '<tr><td>这个是td内容</td></tr>',按照下面的示例进行放置:该示例中,由于 H5 的规范 table 标签下 tbody 下只能是 tr,所以浏览器在渲染的时候出了问题。可以看到组件 row 渲染的 "这个是td内容" 都跑到了 table 之外。解决这个问题的方法就是,我们按照规范在 tbody 之下使用 tr 。但我们用 is= 将 tr 变成 row 组件:这样我们在遵循规范的同时,也使用了 Vuejs 的组件模板;可以看到接下来的浏览器 DOM 渲染已经正常,如下图所示: