VUE.JS 组件component### 1. 什么是组件
组件是vue最强大的功能之一，组件可以扩展HTML元素、封装可重用的代码
组件是自定义元素（对象）
2. 组件的定义方式
建议在组件名称中加入：“-”
方式一：先创建组件构造器，然后由构造器来创建组件
方式二：直接创建组件
/**
方式一：先创建组件构造器，然后由构造器来创建组件
*/
var myCompoent = Vue.extend({
template:"<h3>hello VUE</h3>"
});
//使用Vue.component(标签名，组件的构造器)，根据组件构造器来创建组件
Vue.component("my-hello",myCompoent);
//范式二
Vue.component("v-ps",{
template:"<h2>你好，VUE</h2>"
})
调用：
<v-ps></v-ps>
<my-hello></my-hello>
3. 组件分类
分类：
局部组件和全局组件
4. 模板引用
将组件的代码写到<template></template>中，并且引用。template必须只有一个直接子元素
5.动态组件
使用keep-alive组件，缓存非活动的组件，可以保留组件状态，避免组件重新渲染（默认每次都会销毁非活动的组件并且重新渲染）
二、组件之间的通讯
1. 父子组件
在一个组件内部定义的另外一个组件，称为：父子组件
子组件只能在父组件的内部使用
默认情况下，父子组件数据无法之间访问，每个组件实例的作用域是独立的
2. 组件之间的数据通信
2.1 子组件访问父组件的数据
a)在调用子组件是，绑定想要接收的父组件的数据
<my-world :message="msg" :name="name" ></my-world>
b)在子组件内部使用props选项来声明获取数据（接收父组件的数据）
props:['message','name','user']
props:{}//也可以传递对象，允许配置高级设置，比如：数据的类型判断，数据的校验，设置默认值等。。。
总结：
子组件通过props选项来接收父组件的数据
三种数据形式：data、props、computed
2.2 父组件访问子组件的数据
a）在子组件中使用vm.$emit(事件名，参数1，参数2 ，。。。。)触发一个自定义事件。
this.$emit("e-world",this.age,this.height);//触发一个事件，向父组件传递数据
b) 在父组件中使用自组件的地方监听子组件触发的事件，并且在父组件中定义方法来获取子组件的数据
@e-world：监听子组件的事件
<my-world :message="msg" :name="name" @e-world="getData"></my-world>
3. 单向数据流
父级 prop 的更新会向下流动到子组件中，但是反过来则不行。
不允许直接修改父组件的数据，否则会报错。
解决方式：
1：
如果子组件想把传递过来的值，当做局部变量使用，可以将数据存储到另外一个变量中再操作。不影响父组件
2：
如果子组件想修改数据，并且同步到父组件中，两种方式
a.使用.sync指令（1.0支持，2.0不会，2.3版本以后又支持）
还需要触发一个更新事件 this.$emit('update:name', "唐寅");
b.将父组件中的数据包装成一个对象，传递给子组件，然后在子组件中修改对象属性值（因为对象是引用类型，指向同一个内存地址），推荐！！！