Vue的组件使用

（1）组件化

模块化就是将系统功能分离成独立的功能部分的方法，一般指的是单个的某一种东西，例如js、css

而组件化针对的是页面中的整个完整的功能模块划分，组件是一个html、css、js、image等外链资源，这些部分组成的一个聚合体

优点：代码复用，便于维护

划分组件的原则：复用率高的，独立性强的

组件应该拥有的特性：可组合，可重用，可测试，可维护

(2) 组件

在vue中，我们通过Vue.extend来创建Vue的子类，这个东西其实就是组件

也就是说Vue实例和组件的实例有差别但是差别不大，因为毕竟一个是父类一个是子类

一般的应用，会拥有一个根实例，在根实例里面都是一个一个的组件

因为组件是要嵌入到实例或者父组件里的，也就是说，组件可以互相嵌套，而且，所有的组件最外层必须有一个根实例，所以组件分为：全局组件和局部组件

全局组件在任意的实例、父级组件中都能使用，局部组件只能在创建自己的父级组件或者实例中使用

创建组件：Vue.extend(options)

全局注册：

var App = Vue.extend({ template:"<h1>hello world</h1>" }) Vue.component('my-app',App)

简便写法：

// 创建组件构造器和注册组件合并一起 Vue.component('hello',{//Vue会自动的将此对象给Vue.extend template:"<h1>hello</h1>" })

注意：

组件通过template来确定自己的模板,template里的模板必须有根节点，标签必须闭合

组件的属性挂载通过：data方法来返回一个对象作为组件的属性，这样做的目的是为了每一个组件实例都拥有独立的data属性

局部注册：

new Vue({ el:"#app", components:{ 'my-app':App } })

简便写法：

data:{}, components:{ 'hello':{ template:"<h1>asdasdasdasdasdas</h1>" } }

注意：

在实例或者组件中注册另一个组件，这个时候，被注册的组件只能在注册它的实例或组件的模板中使用，一个组件可以被多个组件或实例注册

注意浏览器规则：

因为vue在解析模板的时候会根据某些html的规则，例如，在table里只能放tr,td,th…，如果放入组件不会解析 这个时候我们可以放入tr使用is方式来标识这个tr其实是组件

<table id="app"> <tr is="hello"></tr> </table>

template：

<template id="own"> <div> <h1>hello world</h1> <p>haha</p> </div> </template> //组件中 template:"#own"

is切换:

在实例、组件的模板中的某一个标签上，可以通过is属性来指定为另一个目标的组件，这个时候我们一般会使用component标签来占位、设置is属性来指定目标组件

<component :is="type"></component> //组件中 data:{ type:'aaa' }, components:{ 'aaa':{template:"<h1>AAAAAAAA</h1>"}, 'bbb':{template:"<h1>BBBBBBBB</h1>"} }

组件嵌套:

应用中划分的组件可能会很多，为了更好的实现代码复用，所以必然会存在组件的嵌套关系

组件设计初衷就是要配合使用的，最常见的就是形成父子组件的关系：组件 A 在它的模板中使用了组件 B。

(4) 虚拟dom

频繁且复杂的dom操作通常是前端性能瓶颈的产生点，Vue提供了虚拟dom的解决办法

虚拟的DOM的核心思想是：对复杂的文档DOM结构，提供一种方便的工具，进行最小化地DOM操作。这句话，也许过于抽象，却基本概况了虚拟DOM的设计思想

(1) 提供一种方便的工具，使得开发效率得到保证 (2) 保证最小化的DOM操作，使得执行效率得到保证

也就是说，虚拟dom的框架/工具都是这么做的：

根据虚拟dom树最初渲染成真实dom当数据变化，或者说是页面需要重新渲染的时候，会重新生成一个新的完整的虚拟dom拿新的虚拟dom来和旧的虚拟dom做对比（使用diff算法）。得到需要更新的地方之后，更新内容

这样的话，就能大量减少真实dom的操作,提高性能

什么是虚拟dom？

Virual DOM是用JS对象记录一个dom节点的副本，当dom发生更改时候，先用虚拟dom进行diff，算出最小差异，然后再修改真实dom。

当用传统的方式操作DOM的时候，浏览器会从构建DOM树开始从头到尾执行一遍流程，效率很低。而虚拟DOM是用javascript对象表示的，而操作javascript是很简便高效的。虚拟DOM和真正的DOM有一层映射关系，很多需要操作DOM的地方都会去操作虚拟DOM，最后统一一次更新DOM。因而可以提高性能

（5）组件之间的通信

props传递数据

组件实例的作用域是孤立的,父组件不能直接使用子组件的数据，子组件也不能直接使用父组件的数据

父组件在模板中使用子组件的时候可以给子组件传递数据

<aaa money="2"></aaa>

子组件需要通过props属性来接收后才能使用

'aaa':{ props:['money'] }

如果父组件传递属性给子组件的时候键名有’-’，子组件接收的时候写成小驼峰的模式

<bbb clothes-logo='abc' clothes-price="123"></bbb> props:['clothesLogo','clothesPrice'] 子组件模板中：{{clothesLogo}}

我们可以用 v-bind 来动态地将 prop 绑定到父组件的数据。每当父组件的数据变化时，该变化也会传导给子组件

单向数据流

Prop 是单向绑定的：当父组件的属性变化时，将传递给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。

另外，每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。如果你这么做了，Vue 会在控制台给出警告。

当父组件传递数据给子组件的时候，子组件不接收，这个数据就会挂载在子组件的模板的根节点上

props验证

我们可以为组件的 prop 指定验证规则。如果传入的数据不符合要求，Vue 会发出警告。这对于开发给他人使用的组件非常有用

验证主要分为：类型验证、必传验证、默认值设置、自定义验证