【vue】6、component和keep-alive、slot插槽、自定义vue指令

1、component标签

在父组件中有时需要切换子组件，可以使用component来指定组件。
component的is属性可以动态绑定一个属性，实现界面的切换。
默认情况下，在切换界面时会删除旧的界面，创建新的界面，如果不希望删除数据，可以使用keer-alive标签包围子组件，此时会将页面缓存起来，下一个切换回来时不会重新创建了。

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

2、keep-alive

keep-alive标签具有exclude和include两个属性，分别代表缓存某个组件和不缓存某个组件，这两个属性不能同时存在。

3、activated&&deactivated

由于缓存机制的存在，组件的生命周期函数中又添加了两个函数。
activated：代表页面被激活，在第一次创建组件的时候也会执行该方法
deactivated：代表页面被缓存

4、slot的基本使用

v-slot:插槽的名字
v-slot可以简写为#

<Test>
	<template v-slot:one>
		<p>这里是插槽的内容</p>
	</template>
</Test>

<template>
		<p>这里是子组件</p>
		<slot name="one">插槽的默认内容(后备内容)</slot>
</template>

5、插槽传递数据

<Test>
	<template v-slot:one="slotData">
		<p>这里是插槽的内容:{{slotData.msg}}</p>
	</template>
</Test>

<template>
		<p>这里是子组件</p>
		<slot name="one" msg="插槽传递的数据"></slot>
</template>

6、自定义vue指令

directives:{
		color:{
			//el代表绑定指令元素的DOM对象
			bind(el){
				console.log("v-color指令执行了")
			}
	}
}

7、自定义指令传值

使用组件，指令里面的参数指向data，想要固定的话加上单引号

<p v-color="color">显示颜色</p>
<p v-color="'green'">显示颜色</p>

自定义组件

directives:{
		color:{
			//bind在初始化元素时会执行一次
			//el代表绑定指令元素的DOM对象,binding.value获取指令的传值
			bind(el,binding){
				console.log(binding.value)
			}
			//在页面重新渲染后执行
			update(el,binding){

			}
	}
}

合并bind和update函数

directives:{
		color(el,binding){
				console.log(binding.value)
			}
}

8、定义全局指令

在main.js中

Vue.directive('color',function(el,binding){

})