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