vue动态组件（组件切换操作）

vue动态组件

有时，我们需要在多个不同的组件之间进行切换操作。
组件的切换方式

• (1)使用v-if
  使用v-if 来处理，适用频繁操作的场景。
  会不断地创建组件和销毁组件,影响性能;
  不会保留组件改变后的状态及修改后的数据

<InBox v-if="currentCom==='InBox'"></InBox>
<PostMail v-if="currentCom==='PostMail'"></PostMail>
<RecycleBin v-if="currentCom==='RecycleBin'"></RecycleBin>

• (2)使用v-show ，
  v-show 改变的只有该元素的display样式
  根据表达式的值（布尔值），切换元素的显示与隐藏（display 属性）
  显示与隐藏，dom树的结构未变

<InBox v-show="currentCom==='InBox'"></InBox>
<PostMail v-show="currentCom==='PostMail'"></PostMail>
<RecycleBin v-show="currentCom==='RecycleBin'"></RecycleBin>

• (3)动态组件
  vue提供的更方便的方式去完成组件之间的切换----动态组件
既改变了dom树结构，又没有销毁元素

component组件
它是vue 内置的一个组件，它提供一个 is 属性用来动态渲染不同的组件

keep-alive 组件
当在这些组件之间切换的时候，如果要保持这些组件的状态，以避免反复重渲染导致的性能问题，vue内置组件keep-alive帮我们解决了这个问题。使用 keep-alive 以后，内部包含的组件将增加 激活 和 失活/冻结 的状态 (类似于演员在舞台表演，叫谁的名字谁上来表演，没叫到的就在后台等待,第一个演员表演完，后面的上来接着演，而表演过的演员没有走，还在舞台后面，后续如果叫到他们，他们再上台)

 <keep-alive>
<component :is="currentCom"></component>
<!--<component :is="isVisible"></component>-->
</keep-alive>

生命周期
使用了 keep-alive的组件会触发两个生命周期函数:
activated()：keep-alive组件激活时调用(组件激活后需要它做什么)
deactivated()：keep-alive组件停用时调用(同理，组件停用后需要它做什么)

看一个示例如下:
App.vue

<template>
<div id="app">
<!-- tab选项切换效果 -->
<button @click="showCom('InBox')" :class="{'current': currentCom==='InBox'}">收邮件</button>
<!-- <button @click="isVisible='InBox'" :class="{'current': isVisible==='InBox'}">收邮件</button> -->
<button @click="showCom('PostMail')" :class="{'current': currentCom==='PostMail'}">发邮件</button>
<button @click="showCom('RecycleBin')" :class="{'current': currentCom==='RecycleBin'}">垃圾箱</button>
<hr />
<keep-alive>
<component :is="currentCom"></component>
<!-- <component :is="isVisible"></component>-->
</keep-alive>
</div>
</template>
<script>
// 引入模块时，文件后缀名.vue可以省略不写
import InBox from "./components/InBox";
import PostMail from "./components/PostMail";
import RecycleBin from "./components/RecycleBin";
export default {
name: "App",
data() {
return {
currentCom: "InBox",
// isVisible:"InBox"
};
},
components: {
InBox,
PostMail,
RecycleBin
},
methods: {
showCom(target) {
this.currentCom = target;
}
}
};
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
/* text-align: center; */
color: #2c3e50;
margin-top: 60px;
}
#app button {
margin-left: 10px;
}
#app div {
width: 240px;
border: 1px solid rgb(240, 218, 218);
}
.current {
background-color: lightblue;
}
</style>

InBox.vue

<template>
<div>
<ul>
<li v-for="item of items" :key="item.index">
<input type="checkbox" />
{{item}}
</li>
</ul>
</div>
</template>
<script>
export default {
name: "InBox",
data() {
return {
items: [
"上有天堂，下有信阳",
"大宋皇城，菊香水韵",
"千年帝都，牡丹花城",
"卧龙之地，灵秀南阳"
]
};
},
// 创建组件InBox
created() {
console.log("InBox:created");
},
// 销毁组件InBox
destroyed() {
console.log("InBox:destroyed");
},
// 使用keep-alive动态组件，提供的两个生命周期函数
activated(){
// 组件激活要做的事情
console.log("InBox被激活了");
},
deactivated(){
// 组件停用后要做的事情
console.log("InBox被停用了");
}
};
</script>

PostMail.vue

<template>
<div>PostMail</div>
</template>
<script>
export default {
name: "PostMail",
created() {
console.log("PostMail:created");
},
destroyed() {
console.log("PostMail:destroyed");
},
activated(){
console.log("PostMail被激活了");
},
deactivated(){
console.log("PostMail被停用了");
}
};
</script>

RecycleBin.vue

<template>
<div>RecycleBin</div>
</template>
<script>
export default {
name: "RecycleBin",
created() {
console.log("RecycleBin:created");
},
destroyed() {
console.log("RecycleBin:destroyed");
},
activated(){
console.log("RecycleBin被激活了");
},
deactivated(){
console.log("RecycleBin被停用了");
}
};
</script>

最后

以上就是愤怒小海豚为你收集整理的vue动态组件（组件切换操作）的全部内容，希望文章能够帮你解决vue动态组件（组件切换操作）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。