Vue.component注册全局组件

Vue.component注册全局组件

一、不在手脚架中的注册

1、全局组件注册的语法糖 Vue.component('组件标签名',构造器对象)

// 1、创建全局组件构造器
const cpn1=Vue.extend({
    template:`
    

       
我是标题2
       
我是内容，呵呵呵呵呵呵呵
    
    `
});
//2、注册全局组件
Vue.component('cpn',cpn1);
/*===================等价于======================*/
//语法糖
Vue.component('cpn1',{
      template:`
       

          
我是标题1
          
我是内容，呵呵呵呵呵呵呵
       
        `
});

2、模板的分类写法

• script标签，注意：类型必须是text/x-template

• template标签

二、手脚架中注册全局组件

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);