Vuejs组件
Posted 澎湃_L
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuejs组件相关的知识,希望对你有一定的参考价值。
一、概念
①组件就是对局部视图的封装,组件思想就是把一个很大的复杂的 Web 页面视图给拆分成一块一块的组件视图,然后利用某种特定的方式把它们组织到一起完成完整的 Web 应用构建。
②目前主流的前端框架angular,react、vue都是组件化开发思想,vue中的组件思想借鉴于react
③利用组件可以提高开发效率,增强可维护性
二、使用
①全局组件(通用组件):一般把网页中特殊的公共部分注册为全局组件,比如轮播图、tab选项卡、分页、通用导航等
<div id="app"> <my-header></my-header> <my-main></my-main> <my-footer></my-footer> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> // 组件的名字,不要使用原生的标签名称 Vue.component(\'my-header\',{ template:\'<header><h1>头部组件</h1></header>\' }); Vue.component(\'my-main\',{ template:` <div> <ul> <li>轮播图</li> <li>产品内容</li> <li>商品展示</li> </ul> </div> ` }); Vue.component(\'my-footer\',{ template:\'<footer><h1>底部组件</h1></footer>\' }); new Vue({ el:\'#app\', data:{ } });
②局部组件(子组件):一般是注册一些非通用的
<div id="app"> <my-child></my-child> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> new Vue({ el:\'#app\', data:{ }, components:{ myChild:{ template:\'<div><h3>子组件</h3></div>\' }, }, }); </script>
③组件与组件之间是相互独立的:
- 默认情况下,组件与组件之间无法进行跨组件数据访问,父子组件都不行
- 组件就是一种特殊的vue实例,不需要实例化,它管理自己的template,模板组件的template必须只有一个根节点
- 在组件中,也可以配置类似于vue实例中的一些选项资源,比如data、methods、computed等等
④组件中的data必须是函数
- 组件的data必须是函数(手动new出来的Vue实例还是普通的对象)
- 函数内部返回一个对象
- 如下面这个例子,如果data不是一个函数,则点击其中一个会影响到其他的两个,不能相互独立开来
<div id="app"> <demo></demo> <demo></demo> <demo></demo> </div> <script src="node_modules/vue/dist/vue.js"></script> <script> Vue.component(\'demo\',{ data:function(){ return{ count:0 } }, template: \'<button v-on:click="count++">You clicked me {{ count }} times.</button>\' }); new Vue({ el:\'#app\', data:{ } }); </script>
⑤父子组件之间的数据传递:父组件通过prop向子组件传递数据
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./lib/vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model=\'message\' placeholder="请输入"> <button @click=\'add\'>添加</button> <!-- 展示组件 --> <item-list :items=\'items\'></item-list> </div> <script> Vue.component(\'item-list\',{ props:{ items:{ type:Array } }, template: ` <div> <ul> <li v-for="(item, index) in items" :key="index">{{item}}</li> </ul> </div> ` }) const app = new Vue({ el:\'#app\', data() { return { message:\'\', items:[\'HTML\',\'JS\',\'CSS\'] } }, methods: { add(){ this.items.push(this.message); this.message = \'\'; } } }) </script> </body> </html>
三、Vue组件化的理解
①定义:组件是可复用的 Vue 实例,准确讲它们是VueComponent的实例,继承自Vue。
②优点:从上面案例可以看出组件化可以增加代码的复用性、可维护性和可测试性
③使用场景:什么时候使用组件?以下分类可作为参考
- 通用组件:实现最基本的功能,具有通用性、复用性,例如按钮组件、输入框组件、布局组件等。
- 业务组件:它们完成具体业务,具有一定的复用性,例如登录组件、轮播图组件。
- 页面组件:组织应用各部分独立内容,需要时在不同页面组件间切换,例如列表页、详情页组件
④如何使用组件:
- 定义:Vue.component(),components选项,sfc
- 分类:有状态组件,functional,abstract
- 通信:props,$emit()/$on(),provide/inject,$children/$parent/$root/$attrs/$listeners
- 内容分发:<slot>,<template>,v-slot
- 使用及优化:is,keep-alive,异步组件
⑤组件的本质:
- vue中的组件经历如下过程 组件配置 => VueComponent实例 => render() => Virtual DOM=> DOM
- 所以组件的本质是产生虚拟DOM
如何使用组件
以上是关于Vuejs组件的主要内容,如果未能解决你的问题,请参考以下文章
Webpack 代码拆分使用 vueJs 组件中断 jest 导入