语法

2023年04月26日

柏拉文

越努力，越幸运

一、组件缓存

---

父组件

<template>
  <div>
    <div>
      <button @click="prev">上一步</button>
      <button @click="next">下一步</button>
    </div>
    <keep-alive>
      <component :is="stepComponent"></component>
    </keep-alive>
  </div>
</template>

<script>
import Step1 from "./step1.vue";
import Step2 from "./step2.vue";
import Step3 from "./step3.vue";

export default {
  name: "App",
  components: {
    Step1,
    Step2,
    Step3,
  },
  data() {
    return {
      step: 1,
    };
  },
  computed: {
    stepComponent() {
      return "step" + this.step;
    },
  },
  methods: {
    prev() {
      if (this.step > 1) {
        this.step -= 1;
      }
    },
    next() {
      this.step += 1;
    },
  },
};
</script>

子组件一

<template>
  <div>
    <h3>第一步</h3>
    <input v-model="str" />
  </div>
</template>
<script>
export default {
  name: "Setp-1",
  data() {
    return {
      str: "",
    };
  }
};
</script>

子组件二

<template>
  <div>
    <h3>第二步</h3>
    <input v-model="str" />
  </div>
</template>
<script>
export default {
  name: "Setp-2",
  data() {
    return {
      str: "",
    };
  },
};
</script>

子组件三

<template>
  <div>
    <h3>第三步</h3>
    <input v-model="str" />
  </div>
</template>
<script>
export default {
  name: "Setp-3",
  data() {
    return {
      str: "",
    };
  },
};
</script>

二、路由缓存

---