我們都知道，vue的組件化是他最強大的核心所在，路由也是特別可愛的一部分，但是路由適合一些大型的組件，看url路徑的時候會出現變化，但是有時候我們想要一些小的局部小刷新，這個時候就需要用到它的動態組件了：

Vue 自身保留的?<component>?元素，可以將組件動態綁定到?is?特性上，從而很方便的實現動態組件切換

代碼如下：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&:hovercursor 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:

<template><div>這是頁面一<input type="text"></div> </template>

　　

　　simple2.vue:

<template><div>這是頁面二<input type="text"></div> </template>

　　

　　

上例中，當 tabView 的值改變，<component> 就會渲染對應的組件，和路由的效果十分類似，但是地址欄并沒有發生改變

但這樣一來，每次切換組件都會重新渲染，無法保留組件上的數據。這時可以使用?keep-alive?將組件保留在內存中，避免重新渲染

頁面效果如下：

?

轉載于:https://www.cnblogs.com/mmykdbc/p/8037620.html

總結

以上是生活随笔為你收集整理的使用vue来做局部刷新的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。