咱們都知道,vue的組件化是他最強大的核心所在,路由也是特別可愛的一部分,可是路由適合一些大型的組件,看url路徑的時候會出現變化,可是有時候咱們想要一些小的局部小刷新,這個時候就須要用到它的動態組件了:html
Vue 自身保留的 <component> 元素,能夠將組件動態綁定到 is 特性上,從而很方便的實現動態組件切換vue
代碼以下:slotDome.vue:組件化
<template> <div> <slot></slot> <slot name="wise" class="demo"></slot> <el-radio-group v-modal="tabView"> <el-radio-button label="simple1" @click="toSim(1)"> <button>頁面一</button></el-radio-button> <el-radio-button label="simple2" @click="toSim(2)"><button>頁面二</button></el-radio-button> </el-radio-group> <keep-alive> <component :is="tabView"></component> </keep-alive> </div> </template> <style lang="stylus" rel="stylesheet/stylus"> el-radio-button &:hover cursor pointer </style> <script> import simple1 from "./simple/simple1.vue"; import simple2 from "./simple/simple2.vue"; export default{ data(){ return { tabView: "simple1" } }, methods: { toSim(index){ this.tabView = `simple${index}`; } }, components: { simple1, simple2 } } </script>
simple1.vue:this
<template> <div> 這是頁面一 <input type="text"> </div> </template>
simple2.vue:url
<template> <div> 這是頁面二 <input type="text"> </div> </template>
上例中,當 tabView 的值改變,<component> 就會渲染對應的組件,和路由的效果十分相似,可是地址欄並無發生改變component
但這樣一來,每次切換組件都會從新渲染,沒法保留組件上的數據。這時能夠使用 keep-alive 將組件保留在內存中,避免從新渲染htm
頁面效果以下:blog