动态组件
有的时候,我们需要在多个不同的组件之间进行切换。虽然我们可以通过 v-if
来处理,但是会比较麻烦,vue
提供了一个更方便的方式来处理这种情况,下边我们通过代码示例来看一下!
我们准备一个选项卡,来感受一下动态组件的方便之处
根组件
<template>
<div id="app">
<button @click="goto('InBox')" :class="{ current: currentComponent === 'InBox' }">收邮件</button>
<button @click="goto('PostMail')" :class="{ current: currentComponent === 'PostMail' }">发邮件</button>
<button @click="goto('RecycleBin')" :class="{ current: currentComponent === 'RecycleBin' }">垃圾箱</button>
<hr />
<InBox v-if="currentComponent==='InBox'" ></InBox>
<PostMail v-if="currentComponent==='PostMail'" ></PostMail>
<RecycleBin v-if="currentComponent==='RecycleBin'" ></RecycleBin>
</div>
</template>
<script>
import InBox from "./components/InBox.vue";
import PostMail from "./components/PostMail.vue";
import RecycleBin from "./components/RecycleBin.vue";
export default {
name: "App",
data() {
return {
currentComponent: "InBox"
};
},
components: {
InBox,
PostMail,
RecycleBin
},
methods: {
goto(target) {
this.currentComponent = target;
},
created() {
console.log(this.currentComponent + ":created");
},
destroyed() {
console.log(this.currentComponent + "InBox:destroyed");
}
},
};
</script>
<style>
.current {
background: yellow;
}
</style>
子组件1===============================================
<template>
<div>
<ul>
<li v-for="item of items" :key="item">
<input type="checkbox" />
{{ item }}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "InBox",
data() {
return {
items: ["111111", "22222222222", "aaaaaaaa", "3333333"]
};
},
created() {
console.log("InBox:created");
},
destroyed() {
console.log("InBox:destroyed");
}
};
</script>
子组件2===============================================
<template>
<div>PostMail</div>
</template>
<script>
export default {
name: "PostMail",
created() {
console.log("PostMail:created");
},
destroyed() {
console.log("PostMail:destroyed");
}
};
</script>
子组件3===============================================
<template>
<div>RecycleBin</div>
</template>
<script>
export default {
name: "RecycleBin",
created() {
console.log("RecycleBin:created");
},
destroyed() {
console.log("RecycleBin:destroyed");
}
};
</script>
我们会发现,当组件切换的时候,都会触发组件的销毁和重建。首先,性能不好。其次,会丢失组件状态
我们可以通过keep-alive 组件 来解决上述问题
<keep-alive>
<component :is="currentComponent"></component>
</keep-alive>
现在就处理了上述问题,同时 keep-alive 会触发 activated
、deactivated
两个生命周期函数
-
keep-alive
组件激活时调用 -
keep-alive
组件停用时调用
插件
插件通常是用来给 vue
提供扩展功能的一种方式
插件通常只有两个来源:
- 自定义
- 第三方
插件需要一个引入和使用就可以了注意!插件的引入和使用都需要写在main.js内,且引入需要写在使用之前,使用需要写在new vue之前
- 引入
import ppt from './AK'
- 使用
Vue.use(ppt);
书写插件时需要注意:
- 如果插件是一个对象,必须提供
install
方法。
export default{
// 把内容放到指定的方法中
install(){
console.log("我是自定义的对象插件")
}
}
- 如果插件是一个函数,它会被作为
install
方法。install
方法调用时,会将 Vue 作为参数传入
export default function(){
vue.filter("指令名",执行的功能);
}
比如说我们按照上述的过滤器,写出一个转换成大写的效果(注意,需要接受vue)
import Vue from 'vue'
export default function(_vue){
// 因为install方法 在被调用时 会主动接受一个参数(vue实例)
// 所以我们这里直接使用参数即可!!!
_vue.filter("cf",(v)=>{
return v.toUpperCase()
});
}
现在插件写好了,引入后也使用了,我们去看一下页面效果
扩展
插件的使用方式还有portotype
import引入进来的是一个对象,所以有portotype很正常,然后我们在使用的时候可以这样去写
import ak from './AK'
Vue.prototype.$cf = ak
// cf是随便写的
但是不推荐使用
这样会操作vue的原型!