组件通讯之slot
在要封闭的组件内部通过slot实现：
例如：
<div class="hd" ref="hd">
<slot name="goBack"></slot>
{{ title }}
<slot name="logout"></slot>
</div>
调用时，在组件标签中间嵌入：通过 slot="名称"来嵌入
<div class="hd" ref="hd">
<slot name="goBack"></slot>
{{ title }}
<slot name="logout"></slot>
</div>
总结：封装一个组件的三要素：要传递的参数，事件，slot
组件通讯是单向的数据流：
如何双向传递解决方案：
第一种方案：父组组件往子级组件传递一个JS对象 【不推荐】
第二种方案：利用sync和update事件触发来来向父级反馈更新的值
第一步：在父级传递的子组件添加sync
例如： <headCom :title.sync="t"></headCom>
第二步：在子组件内部，通过$emit更新父组件传递过来的值
例如： this.$emit('update:title',v)
其中：update是一个关键字，固定写法，后面跟冒号（：），再后是你要更新的哪个属性，例如：title
当然：表单中的v-model也是双向数据流、
计算属性：主要通过computed关键字实现
通过逻辑计算，得到的一个新值，这个新值是可以实时响应的
计算属性的优势：可以缓存数据
注意：watch
你说一下vue中 methods,computed,watch的区别？？？
$set:可以动态的给对象添加属性，并且实现响应
vue过滤器:即数据进行格式化处理
一、 创建Vue过滤器：
1.全局过滤器
Vue.filter('过滤器名称',function(参数1,参数2,...) {
//逻辑实现
})
注意：参数1：就是要格式化的那个数据，
参数2：才是真正过滤器中传递的第3个参数
参数3:才是真正过滤器中传递的第2个参数
以此类推。。。。
全局过滤器：可以在任意组件中使用
2.局部过滤器:
通过filters只能在当前组件内部来使用
二、使用过滤器
{{ 要格式化的数据 | 过滤器名(参数1，参数2,...,参数n) }}
自定义指令:主要对经常使用的dom操作进行封装，方便复用
vue指令：
vue内置指令：v-for,v-if,v-show,v-cloak,v-html......
vue自定义指令：全局自定义指令，局部自定义指令
第一种：全局自定义指令：
Vue.directive('自定义指令名',{
})
例如：
Vue.directive('focus',{
inserted(el) {
console.log('el:',el)
el.focus();
}
});
第二种：局部自自定指令：主要通过directives实现
转场动画:主要通过transition组件来实现动画效果
使用步骤：
第一步：要给进行切换的区域添加一个transition组件，并且添加一个name名称，这个名称即为css类的前缀
例如：
<transition name="move">
<router-view></router-view>
</transition>
第二步：给添加name的transition定义css3动画效果，例如：位移(tranform:translate())，淡入淡出(opaicty)
设置动画：进入动画，离开动画
1.进入动画：
.name名称-enter {
}
.name名称-enter-active {
}
例如：
.dh-enter {
transform: translateX(-100%)
}
2.离开：
.name名称-leave {
}
.name名称-leave-active {
}
例如：
.dh-leave-active {
transform: translateX(100%)
}
.dh-enter-active, .dh-leave-active {
transition: transform .3s;
}
animate.css和vue中的transition配合使用
说明：
1.进入动画 enter-active-class="animated tada"
2.离开动画：leave-active-class="animated fadeInDown"
<transition
name="move"
enter-active-class="animated tada"
leave-active-class="animated fadeInDown"
>
<router-view></router-view>
</transition>
### keep-alive:可以缓存组件内容在内存中
<keep-alive include="home,cate">
<router-view></router-view>
</keep-alive>
说明：
include:表示只包含对应的组件才缓存
exclude:表示排除要缓存的组件
与keep-alive相关的钩子函数：
activated:keep-alive 组件激活时调用
deactivated:keep-alive 组件停用时调用
注意：必须在使用keep-alive时才会激活activated和deactivated这两个钩子
nextTick
