使用vue來作局部刷新

咱們都知道,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

相關文章
相關標籤/搜索