Vue.component注册全局组件

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