动态组件

• component vue内置的值，表示组件的占位符，is的属性表示渲染的组件的名字

<component :is="Left"></component>

• keep-alive保持组件不被销毁

<keep-alive>
	<component :is="Left"></component>
</keep-alive>

• keep-alive有对应的生命周期函数

1. deactivated -被缓存时候，自动触发的生命周期函数
2. activated- 被激活时自动触发的生命周期函数
3. include- 指定被缓存的组件名称，若不设置都被缓存
4. exclude- 指定不被缓存的组件名称，不可以和include同时使用

插槽

• 封装组件时，把不确定的、希望由用户指定的内容封装为插槽
• 一般情况下使用组件时，指定的内容都会放到名为default的插槽中
• 如果想指定插槽，需要加template,v-slot,v-slot:name
• v-slot简写的指令是#

<template v-slot:default>
	<p>指定的内容</p>
</template>

• 默认内容

<slot name="default">这是default插槽的默认内容</slot>

• 具名插槽-带名字的插槽，在组件中调用
• 作用域插槽-在预留的时候声明一些对象，在使用的时候调用对象

自定义指令

• 私有自定义指令

1. 在每个vue组件中，在directives节点下声明私有自定义指令
2. binding.value获取指令绑定的值
3. update()用来更新dom

directives:{
	color{
		bind(el，binding){
    		el.style.color=binding.value
    	},
        update(el,binding){
        	el.style.color=binding.value
        }
    }
}

4. 函数简写

directives:{
	color(el,binding){
    	el.style.color=binding.value
    }
}

• 全局自定义指令

1. 需要放到main.js中

Vue.directive('color',function(el,binding){
	el.style.color=binding.value
}

axios挂载

• 把axios挂载到vue.prototype自定义的属性上，$http,vue组件直接调用

Vue.prototype.$http=axios

• 需要axios发起请求，直接this.$http.get('')/post('',{})
• 缺点是不利于API接口的复用