vuejs_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>
