zoukankan      html  css  js  c++  java
  • vue 之 动态组件(动态组件-生命周期,&异步组件-懒加载)

    一.动态组件 

    原理:

    过程一: 每次进行组件间的切换时,Vue都创建了一个新的组件实例,同时存在销毁过程

    过程二:为了避免过程一每次进行销毁重建的问题,那么可以通过 keep-alive 来处理

     语法:

    <component v-bind:is="currentTabComponent"></component>  

    过程一 案例:

    App.vue
    
    <template>
      <div>
        <div id="dynamic-component-demo" class="demo">
          <button
            v-for="tab in tabs"
            v-bind:key="tab"
            v-bind:class="['tab-button', { active: currentTab === tab }]"
            v-on:click="currentTab = tab"
          >
            {{ tab }}
          </button>
    
          <component v-bind:is="currentTab" class="tab"></component>
        </div>
        <!-- <button @click="myName = 'my-header'">显示 my-header</button>
        <button @click="myName = 'my-footer'">显示 my-footer</button> -->
      </div>
    </template>
    <script>
    import MyHeader from "./components/MyHeader.vue";
    import MyFooter from "./components/MyFooter.vue";
    import MyMain from "./components/MyMain.vue";
    export default {
      data() {
        return {
          currentTab: "my-header",
          tabs: ["my-header", "my-main", "my-footer"],
        };
      },
      components: {
        MyHeader,
        MyMain,
        MyFooter,
      },
      methods: {},
      mounted() {},
      created() {},
    };
    </script>
    <style>
    .tab-button {
      padding: 6px 10px;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      border: 1px solid #ccc;
      cursor: pointer;
      background: #f0f0f0;
      margin-bottom: -1px;
      margin-right: -1px;
    }
    .tab-button:hover {
      background: #e0e0e0;
    }
    .tab-button.active {
      background: #e0e0e0;
    }
    .tab {
      border: 1px solid #ccc;
      padding: 10px;
    }
    </style>

     

    MyMain.vue
    
    
    <template>
      <div>
        <div>main</div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {};
      },
      created() {
        console.log("my-main组件重新生成了");
      },
      beforeDestroy() {
        console.log("my-main组件被销毁了");
      },
    };
    </script>
    <style></style>
    

     

    过程二 案例改进

    App.vue
    
    <template>
      <div>
        <div id="dynamic-component-demo" class="demo">
          <button
            v-for="tab in tabs"
            v-bind:key="tab"
            v-bind:class="['tab-button', { active: currentTab === tab }]"
            v-on:click="currentTab = tab"
          >
            {{ tab }}
          </button>
          <keep-alive>
            <component v-bind:is="currentTab" class="tab"></component>
          </keep-alive>
        </div>
        <!-- <button @click="myName = 'my-header'">显示 my-header</button>
        <button @click="myName = 'my-footer'">显示 my-footer</button> -->
      </div>
    </template>
    <script>
    import MyHeader from "./components/MyHeader.vue";
    import MyFooter from "./components/MyFooter.vue";
    import MyMain from "./components/MyMain.vue";
    export default {
      data() {
        return {
          currentTab: "my-header",
          tabs: ["my-header", "my-main", "my-footer"],
        };
      },
      components: {
        MyHeader,
        MyMain,
        MyFooter,
      },
      methods: {},
      mounted() {},
      created() {},
    };
    </script>
    <style>
    .tab-button {
      padding: 6px 10px;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
      border: 1px solid #ccc;
      cursor: pointer;
      background: #f0f0f0;
      margin-bottom: -1px;
      margin-right: -1px;
    }
    .tab-button:hover {
      background: #e0e0e0;
    }
    .tab-button.active {
      background: #e0e0e0;
    }
    .tab {
      border: 1px solid #ccc;
      padding: 10px;
    }
    </style>
    

     

    动态组件生命周期

    <template>
      <div>
        <div>header {{ num }}</div>
      </div>
    </template>
    <script>
    export default {
      data() {
        return {
          num: 0,
        };
      },
      created() {},
      activated() {
        this.num = localStorage.getItem("num");
      },
      deactivated() {
        console.log('销毁了')
      },
    };
    </script>
    <style></style>
    

      

    二.异步组件

    第一步:如何实现懒加载

    <template>
      <div>
        <h1>Vue中异步组件的使用</h1>
        <button @click="handleClick">按钮</button>
        <div v-if="isShow">
          <List />
        </div>
      </div>
    </template>
    <script>
    // import List from "./components/List.vue";
    export default {
      data() {
        return {
          isShow: false,
        };
      },
      components: {
        List: () => import(/* webpackChunName:"list" */ "./components/List.vue"),
      },
      methods: {
        handleClick() {
          this.isShow = !this.isShow;
        },
      },
    };
    </script>
    <style>
    div {
      text-align: center;
    }
    </style>
    

      

    第二步:定义一个工厂函数

    <template>
      <div>
        <h1>Vue中异步组件的使用</h1>
        <button @click="handleClick">按钮</button>
        <div v-if="isShow">
          <AsyncList />
        </div>
      </div>
    </template>
    <script>
    // import List from "./components/List.vue";
    import LoadingComponent from "./components/LoadingComponent.vue";
    import ErrorComponent from "./components/ErrorComponent.vue";
    //工厂函数
    const AsyncList = () => ({
      component: import("./components/List.vue"),
      loading: LoadingComponent,
      error: ErrorComponent,
      delay: 200, //延迟200毫秒
      timeout: 1, //超时
    });
    export default {
      data() {
        return {
          isShow: false,
        };
      },
      components: {
        AsyncList,
      },
      methods: {
        handleClick() {
          this.isShow = !this.isShow;
        },
      },
    };
    </script>
    <style>
    div {
      text-align: center;
    }
    </style>
    

      

  • 相关阅读:
    nginx入门与实战
    python开发之virtualenv与virtualenvwrapper讲解
    Linux下的python3,virtualenv,Mysql、nginx、redis安装配置
    Linux系统基础优化及常用命令
    vim与程序员
    Shell基本命令
    Linux之文档与目录结构
    远程连接Linux
    oracle 根据时间戳查询date类型sql
    oracle 锁用户
  • 原文地址:https://www.cnblogs.com/zmztya/p/14483017.html
Copyright © 2011-2022 走看看