How does vue implement partial refresh? (code example)

We all know that Vue’s componentization is its most powerful core, and routing is also a particularly cute part. However, routing is suitable for some large components. When you look at the URL path, you will Changes occur, but sometimes we want some small local refreshes. At this time, we need to use its dynamic components.

The element retained by Vue itself can dynamically bind the component to the is attribute, thereby conveniently realizing dynamic component switching.

The code is as follows: slotDome.vue:

<template>
  <div>
    <slot></slot>
    <slot name="wise"></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 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:

<template>
  <div>
    这是页面一
    <input type="text">
  </div>
</template>

simple2.vue:

<template>
  <div>
    这是页面二
    <input type="text">
  </div>
</template>

In the above example, when the value of tabView changes, will render the corresponding component and route The effect is very similar, but the address bar has not changed

But in this way, each time the component is switched, it will be re-rendered, and the data on the component cannot be retained. At this time, you can use keep-alive to keep the component in memory to avoid re-rendering

The page effect is as follows:

Related recommendations:

2020 Summary of front-end vue interview questions (with answers)

vue tutorial recommendation: 2020 latest 5 vue.js video tutorial selections

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of How does vue implement partial refresh? (code example). For more information, please follow other related articles on the PHP Chinese website!