vue -- 异步组件的引用

程序员小哲

于 2020-10-10 08:30:20 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

文章标签： vue js react html jquery

本文链接：https://blog.youkuaiyun.com/xiaozhezhe0470/article/details/108989995

本文详细介绍了在Vue中如何使用异步组件，通过拆分父组件和子组件，提高应用加载效率。通过异步加载，可以在需要时才加载子组件，减少初始页面的负担。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

父组件

<template>
  <div id="app">
    我是父页面<br />
    点击按钮我就从500变成了800<br />
    {{ width }}
    <hr />
    <HelloWorld1 :width="width" @myChange="dochange" />
  </div>
</template>
<script>
// import HelloWorld1 from "./HelloWorld1";
const HelloWorld1 = () => import("./HelloWorld1");

export default {
  name: "App",
  data() {
    return {
      width: 500,
    };
  },
  methods: {
    dochange(val) {
      this.width = val;
    },
  },
  components: {
    HelloWorld1,
  },
};
</script>

子组件

<template>
  <div>
    我是子页面<br>
    <button @click="dochange()">ahahha</button>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    dochange() {
      this.$emit("myChange", 800);
    },
  },
};
</script>