master

分支 (1)

管理

管理

master

vue-courseware
/
32-动态组件切换.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <script src="./js/vue.js"></script>
    <style>
      .box {
        width: 300px;
        border: 1px solid #bcedbc;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!-- <button @click="change(0)">组件1</button>
      <button @click="change(1)">组件2</button>
      <button @click="change(2)">组件3</button> -->

      <!-- <my-c1 v-if="isShow==0"></my-c1>
      <my-c2 v-if="isShow==1"></my-c2>
      <my-c3 v-if="isShow==2"></my-c3> -->

      <!-- 动态组件 ,使用vue提供的组件 component -->
      <button @click="change1(1)">组件1</button>
      <button @click="change1(2)">组件2</button>
      <button @click="change1(3)">组件3</button>
      <!-- <component is="my-c3"></component> -->

      <!-- 使用is属性，调用组件 -->
      <component :is="isComponent"></component>
      <!-- 保持组件实时状态，vue提供的组件 keep-alive -->
      <keep-alive>
        <component :is="isComponent"></component>
      </keep-alive>
    </div>
  </body>
  <script>
    Vue.component("my-c1", {
      template: `<div class="box">
          我是组件1
      </div>`,
    });
    Vue.component("my-c2", {
      template: `<div class="box">
          我是组件2
          <br>
          <input type="text" placeholder="请输入姓名">
          <input type="checkbox" name="" id="" />
      <input type="checkbox" name="" id="" />
      </div>`,
    });
    Vue.component("my-c3", {
      template: `<div class="box">
          我是组件3
      </div>`,
    });
    new Vue({
      el: "#app",
      data: {
        isShow: 0,
        isComponent: "my-c1",
      },
      methods: {
        change(idx) {
          this.isShow = idx;
        },
        change1(idx) {
          this.isComponent = "my-c" + idx;
        },
      },
      computed: {},
      mounted() {},
      watch: {},
    });
  </script>
</html>