Vue.component注册全局组件
一、不在手脚架中的注册
1、全局组件注册的语法糖 Vue.component('组件标签名',构造器对象)
// 1、创建全局组件构造器
const cpn1=Vue.extend({
template:`
<div>
<h2>我是标题2</h2>
<p>我是内容,呵呵呵呵呵呵呵</p>
</div>
`
});
//2、注册全局组件
Vue.component('cpn',cpn1);
/*===================等价于======================*/
//语法糖
Vue.component('cpn1',{
template:`
<div>
<h2>我是标题1</h2>
<p>我是内容,呵呵呵呵呵呵呵</p>
</div>
`
});
2、模板的分类写法
- script标签,注意:类型必须是text/x-template
<script type="text/x-template" id="cpn">
<div>
<h2>我是标题</h2>
<p>我是内容,哈哈哈哈哈哈哈哈哈哈</p>
</div>
</script>
- template标签
<template id="cpn">
<!--子组件很多标签,必须有个根节点-->
<div>
<h2>我是标题</h2>
<p>我是内容,呵呵呵呵呵呵呵呵呵呵呵呵呵</p>
</div>
</template>
<script>
//全局组件
Vue.component('cpn',{
template:'#cpn'
});
</script>
二、手脚架中注册全局组件
1、在components文件夹下新建组件
- 注意点,要有name(组件名)
export default {
name: "TypeNav",
}
2、在main.js中引入全局组件,并注册
//三级联动组件---全局组件
import TypeNav from '@/components/TypeNav'
import Carousel from "@/components/Carousel"
//第一个参数:全局组件的名字。第二个参数:哪个组件
Vue.component(TypeNav.name,TypeNav);
Vue.component(Carousel.name,Carousel);