一.混入语法
混入语法就是代码复用，重复利用的代码块，通过mixins实现
//混入语法
const options={
data(){
return {num:100}
},
methods:{
add(){this.num++}
}
}
const CompA = {
// 组件中有data,优先使用data里的属性和方法
data(){
return {
num:0
}
},
mixins: [options],
template: `
<div>
<h3>A组件</h3>
<p>{{num}}</p>
<button @click="add">按钮</button>
</div>
`,
};二.插槽（可扩展的组件）
1.匿名插槽 通过<slot> 可以在组件中扩展
<div id="app">
<comp-header>
<!-- 无名插槽 -->
<span>123</span>
</comp-header>
</div>
// 可扩展的组件(插槽)可以在vue实例里的组件里书写文本以及标签
const CompHeader = {
template: `
<header class="header">
<div class="left">
<slot></slot>
</div>
</header>
`,
};
new Vue({
//挂载容器
el: "#app",
components:{
CompHeader
}
});2.具名插槽
<div id="app">
<!-- // 具名插槽输入名字在使用是要用v-slot 或者#-->
<!-- template 用入写入新标签元素 -->
<comp-header>
<template v-slot:left>
<span>LOGO</span>
</template>
<template v-slot:center>
<input type="text" placeholder="请输入">
</template>
<template #right>
<span>签到</span>
</template>
</comp-header>
</div>
// slot 插槽内置属性
const CompHeader = {
template: `
<header class="header">
<div class="left">
<slot name="left"></slot>
</div>
<div class="center">
<slot name='center'></slot>
</div>
<div class="right">
<slot name='right'></slot>
</div>
</header>
`,
};
new Vue({
//挂载容器
el: "#app",
components:{
CompHeader
}
});三.动态组件
通过内置的组件component的is属性，决定渲染哪一个组件
//可以通过点击改变component修改is
<div class="tab">
<div @click="tabFunc(0)" :class="['btn',index==0?'active':'']">最新</div>
<div @click="tabFunc(1)" :class="['btn',index==1?'active':'']">热门</div>
</div>
//通过内置组件
<component :is="compName"> </component>
//此处有两个组件
const NewSong={
template:`
<div style="height: 120px;background-color: pink;">
<h3>最新音乐</h3>
</div>`
}
const HotSong={
template:`
<div style="height: 120px;background-color:yellow;">
<h3>热门音乐</h3>
</div>`
}
new Vue({
el:"#app",
components:{
NewSong,
HotSong
}
})四.过渡
利用内置组件transition 组件，可以实现过渡(动画入场，动画离场）
<style>
/* 入场 */
.v-enter{
transform: translateX(-100%);
opacity: 0;
}
.v-enter-active{
transition: all .5s;
}
.v-center-to{
transform: translateX(0%);
opacity: 1;
}
/* 离场 */
.v-leave{
transform: translateX(0%);
opacity: 1;
}
.v-leave-active{
transition: all .5s;
}
.v-leave-to{
transform: translateX(-100%);
opacity: 0;
}
</style>
<!-- 使用过渡需要加内置属性 -->
<transition>
<div v-if="isShow" class="bg-primary mt-2" style="height: 200px;"></div>
</transition>五.动画
在vue中可以使用动画搭配过渡特效对标签进行离场入场的动画形式
<style>
/* 入场类名 */
.enter-box {
animation: enter-ani .5s forwards;
}
/* 离场类名 */
.leave-box {
animation: leave-ani .5s forwards;
}
/* 自定义动画 */
/* 入场动画 */
@keyframes enter-ani {
0% {
transform: scale(.5) rotate(180deg);
opacity: 0;
}
100% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
}
/* 离场动画 */
@keyframes leave-ani {
0% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
100% {
transform: scale(.5) rotate(180deg);
opacity: 0;
}
}
</style>
<transition
enter-active-class="enter-box"
leave-active-class="leave-box"
>
<div v-if="isShow" class="bg-primary mt-2" style="height: 200px;"></div>
</transition>
//还可以使用动画库的方式设计动画
<transition
enter-active-class="animate__animated animate__lightSpeedInLeft"
leave-active-class="animate__animated animate__lightSpeedOutRight"
>
<div v-if="isShow" class="bg-warning mt-2" style="height: 200px;"></div>
</transition>
六.keep-alive 组件缓存
keep-alive 是一种保存组件状态的内置属性，通常用于动态组件中
<style>
/* 入场类名 */
.enter-box {
animation: enter-ani 0.5s forwards;
}
/* 离场类名 */
.leave-box {
animation: leave-ani 0.5s forwards;
}
@keyframes enter-ani {
0% {
transform: scale(0.5) rotate(180deg);
opacity: 0;
}
100% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
}
@keyframes leave-ani {
0% {
transform: scale(1) rotate(0deg);
opacity: 1;
}
100% {
transform: scale(0.5) rotate(180deg);
opacity: 0;
}
}
</style>
<!-- 处理动画，利用enter-active,leave-active 属性设置动画离场入场动画过渡 -->
<transition enter-active-class="enter-box" leave-active-class="leave-box">
<!-- vue实例与组件都有生命周期 创建 挂载 更新 销毁 -->
<!-- 加上 keep-alive内置的组件输入的值销毁时不会消失-->
<!-- 缓存数据状态的内置组件 -->
<!-- include (包括缓存) 和exclude (排除缓存) 允许组件内不同标签哪些可缓存哪些不可缓存-->
<!-- keep-alive不能作用与兄弟只能作用于嵌套 -->
<keep-alive include="aaa">
<aaa v-if="isShow"></aaa>
</keep-alive>
</transition>
