一、组件component
1、什么是组件
组件（Component）是Vue.js最强大的功能之一，组件可以扩展HTML元素，封装可重用的代码
组件是自定义的元素（对象）
2、定义组件的方式
方式1：先创建组件的构造器，由组件构造器创建组件
注释：麻烦
全局构造器
a)、使用 Vue.extend() 创建一个组件构造器
var MyComponent=Vue.extend({
template;"<h2>hello Word</h2>"
})
b)、使用Vue.component(标签名，组件构造器)：根据组件构造器来创建组件
Vue.component('hello',MyComponent)
使用：<hello></hello>
方式2：直接创建组件
注释：方便 推荐使用
Vue.component('world',{
template:`<h2>hello Word</h2>`，
data:function(){//在组件中存储数据时，必须以函数形式，函数返回一个对象
return {
name:"小零"
}
}
})
3、组件的分类
分类：全局组件、局部组件
4、引用模板
将组件内容放到模板<template></template>中并引用
<template id="wbs">
<div><!-- template：有且只有一个根元素 -->
<h3>{{msg}}</h3>
<ul><li v-for="(k,i) in arr">{{k}}</li></ul>
</div>
</template>
new Vue({
el:"#container",
data:{
msg:"Holle Word"
},
computed:{},//计算属性必须是个函数
methods:{},
components:{
template:"#wbs",
data(){
return{
msg:"哈哈"，
arr:["白小白","玥甄","小零","小智","小媚","小卷卷"]
}
}
}
})
5、动态组件
多个组件同时使用一个挂载点，然后动态的在它们之间切换、
<component :is="flag"></component>
new Vue({
el:"#container",
data:{
flag:"组件名"
},
computed:{},//计算属性必须是个函数
methods:{},
components:{
'my-hello':{
template:`<h2>我是hello组件</h2>`，
data:function(){
return {
name:"小零"
}
}
},
'my-world':{
template:`<h2>我是world组件</h2>`，
data:function(){
return {
name:"小零"
}
}
}
}
})
<keep-alive> 使用 keep-alive 组件缓存非活动组件，可以保留状态，避免重新渲染，默认每次都会销毁非活动组件并且重新创建
6、组件间数据的传递
1、父子组件
在一个组件内部定义另一个组件，称之为父组件
子组件只能在父组件内部使用
默认情况下，子组件无法访问父组件中的数据，每个组件实例的的作用域是独立的
2、组件之间数据传递（通信）
2.1、子组件访问父组件的数据
a)、在调用组件时，绑定想要的父组件中的数据
:数据名="数据变量"
b)、在子组件内部，使用props选项声明获取的数据，即接收来自父组件的数据
props:['数据名1','数据名2'],
总结：父组件通过props向下传递数据给子组件
注释：组件中的数据共有三种形式： data 、 props 、 computed （计算属性）
2.2父组件访问子组件的数据
a)、在子组件中使用 vm.$emit(事件名,数据) ; this.$emit('事件名',参数1,参数2)
b)、父组件在使用的地方监听触发事件，并且在父组件中定义方法，用来获取数据
<child @事件名="事件名（注：在父组件中定义的事件）"></child>
<child @事件名="getData"></child>
例：
methods：{
getData(参数1,参数2){
console.log(参数1,参数2)
}
}
总结：子组件通过 events 给父组件触发事件，并且父组件中定义方法，用来获取数据
3、单项数据流
props是单向绑定的，当父组件的属性变化时，将传递给子组件，但是不会反过来
而且不允许子组件直接修改父组件中的数据，报错
解决方法：
方式1：如果子组件想把它变成局部变量来使用，可以将数据存入另一个变量中再进行操作，不影响父组件中的数据
方式2：如果子组件想修改数据并且同步更新到父组件中，两个方法：
a)、使用.sync(1.0 版本中支持，2.0版本中不支持，2.3 版本又开始支持了)
需要显示的触发一个更新事件
b)、可以将父组件中的数据包装成对象,然后在子组件中修改对象的属性（因为对象是引用类型的，指向同一个类型空间）
4、非父子组件之间的通信
非父子组件之间的通信，可以通过一个空的Vue实例作为中央时间总线（事件中心），用它触发事件和监听事件
先创建一个空的vue实例
var Event=new Vue();
发送数据方式为：
Event.$emit('事件名',参数1，参数2)
接收数据方式为：
Event.$on('事件名',(参数1，参数2)=>{ console.log(参数1,参数2) })
二、slot内容分发