vue之异步组件以及vue-cli无法使用template定义局部组件

最新推荐文章于 2023-08-05 11:55:49 发布

JQ...

最新推荐文章于 2023-08-05 11:55:49 发布

阅读量1k

点赞数 1

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_42201272/article/details/105630365

版权

笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

使用外部引入整个vue.js

<body>
    <div id="app">
      <button @click="compone='lisi'">lisi</button>
      <button @click="compone='zs'">zs</button>
      <!-- 不加keep-alive组件不会进行缓存   切换时组件会被销毁-->
      <!-- <component :is="compone"></component> -->
      <!-- 加keep-alive组件会进行缓存   切换时组件不会被销毁-->
      <keep-alive>
        <component :is="compone"></component>
      </keep-alive>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
     var vm = new Vue({
        el: "#app",
        data: {
          compone: "lisi",
        },
        components: {
          lisi: {
            template: `<h1>lisi</h1>`,
            destroyed() {
              console.log("被销毁了");
            },
          },
          zs: {
            template: `<h1>zhangsan</h1>`,
          },
        },
      });
    </script>
  </body>

通常当我们从官网引入vue.js的时候这段代码是可以正常运行的，
但是，当我们在vue-cli的script中在通过这种方式注册组件的时候会报错

<template>
  <div>
    <my-components></my-components>
  </div>
</template>
<script>
export default {
  componts: {
    "my-components": {
      template: `<div>hello world</div>`,
    },
  },
};
</script>

报错原因是为什么呢：主要是因为第一个我们引用的时vue.js文件，运行时也是依赖的vue.js的整个文件，而vue-cli运行时引用的时什么文件呢，从报错中可以看到提示中时从vue.runtime.js中报的错误，所以我们可以看出来，vue-cli引用的文件是vue.runtime.js文件，可以再node_modules中找到此文件。所以这就是报错原因，那么如何在单文件组件中使用局部的自定义组件呢，使用的就是异步组件：
1.创建一个单文件组件名为 my-async-component.vue

//简单定义个单文件组件
<template>
  <div>hello world</div>
</template>

2.在另外一个单文件组件中使用路由懒加载方式进行使用

<template>
  <div>
    <my-components></my-components>
  </div>
</template>
<script>
export default {
  componts: {
    // 不要使用这种方式
    // "my-components": {
    //   template: `<div>hello world</div>`,
    // },
    // 用路由懒加载加载方式
    "my-components": () => import("./my-async-component"),
  },
};
</script>

JQ...

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue之异步组件以及vue-cli无法使用template定义局部组件

使用外部引入整个vue.js<body> <div id="app"> <button @click="compone='lisi'">lisi</button> <button @click="compone='zs'">zs</button> <!-- 不加keep-al...
复制链接

扫一扫