zoukankan      html  css  js  c++  java
  • Vue的异步组件

    方法一、<template>

      <div id="app">
        <button class="btn" @click="clickMe">点我</button>
        <div v-if="show">
       <yibuzujian></yibuzujian>
        </div>
        <router-view />
      </div>
    </template>
    <script>
    export default {
      components:{
        yibuzujian: ()=>import("./yibuzujian")
      },
      data() {
        return {
          show:false,
        };
      },
      methods: {
        clickMe() {
          // this.$toast("你好啊!")
          this.show = !this.show
        }
      },
    };
    </script>
    <style lang="stylus">
    #app {
      display: flex;
      justify-content: center;
      align-items: centerS;
    }
    </style>

    方法二:

    <template>
      <div id="app">
        <button class="btn" @click="clickMe">点我</button>
        <div v-if="show">
          <AsyncList />
        </div>
        <router-view />
      </div>
    </template>
    <script>
    import loading from "./loading";
    import ErroCom from "./ErroCom";
    const AsyncList = ()=>({
      component:import("./yibuzujian"),
      loading: loading, //loading组件
      error:ErroCom,//错误展示
      delay:200,//延迟
      timeout:500,//如果3秒没有加载,就出现error组件
    })
    export default {
      components:{
        AsyncList
      },
      data() {
        return {
          show:false,
        };
      },
      methods: {
        clickMe() {
          // this.$toast("你好啊!")
          this.show = !this.show
        }
      },
    };
    </script>
    <style lang="stylus">
    #app {
      display: flex;
      justify-content: center;
      align-items: centerS;
    }
    </style>
  • 相关阅读:
    CODEVS4650 破损的键盘
    洛谷P1656 炸铁路
    洛谷 P3225 [HNOI2012]矿场搭建
    1265 四点共面
    1406: [AHOI2007]密码箱
    1193: [HNOI2006]马步距离
    1800: [Ahoi2009]fly 飞行棋
    1923: [Sdoi2010]外星千足虫
    I
    2017CCPC秦皇岛G ZOJ 3987Numbers(大数+贪心)
  • 原文地址:https://www.cnblogs.com/0520euv/p/13893823.html
Copyright © 2011-2022 走看看