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

作者：黃哈哈。

原文連結：https://www.cnblogs.com/jiajia-hjj/p/15864424.html

本部落格大多為學習筆記或讀書筆記，本文如對您有幫助，還請多推薦下此文，如有錯誤歡迎指正。