Comment Vue implémente-t-il l'actualisation partielle ? (exemple de code)

Nous savons tous que la composantisation de Vue est son noyau le plus puissant, et le routage est également une partie particulièrement mignonne. Cependant, le routage convient à certains composants volumineux. , des changements se produiront, mais parfois nous souhaitons quelques petites actualisations locales. Pour le moment, nous devons utiliser ses composants dynamiques.

L'élément retenu par Vue lui-même peut lier dynamiquement des composants à l'attribut is, réalisant ainsi facilement une commutation dynamique des composants

Le code est le suivant : 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>

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

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!