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){
})