Vue組件全局注冊和局部注冊

 

 

 

本文主要將了解Vue全局組件和局部組件注冊的思路，來理解Vue CLI組件注冊思路

Vue CLI中文官方文檔：https://cli.vuejs.org/zh/

Vue CLI安裝和項目創建參考文章：
http://blog.java1234.com/blog/articles/543.html
https://segmentfault.com/a/1190000014804826

一、全局組件
定義一個名為 button-counter 的新組件，並全局注冊如下。

語法： Vue.component(組件ID，選項對象)      //組件在全局用 Vue.component() 注冊時，全局 ID 自動作為組件的 name。

 

 

二、局部對象
定義一個名為button-counter 的新組件，並局部注冊。
1、通過一個普通的 JavaScript 對象來定義組件

var ComponentA = {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
}

 

2、注冊組件，在使用ComponentA的components 選項中注冊想要使用的組件：

var ComponentB = {
components: {
' button-counter': ComponentA    //組件名稱：選項對象
},
// ...
}

 

三、模塊系統： ComponentA.vue，ComponentB.vue文件分別定義組件A和組件B

從局部對象的選項對象定義可知，主要是必要的template選項以及可選的其他選項。在.vue文件中定義組件適合局部組件類似的。
首先WebStorm 新建一個組件，模板代碼如下。下面再在template標簽中寫template選項的代碼，在script標簽中導出的組件選項對象中寫其他選項。

1、定義組件，ButtonCounter.vue( ComponentA)

2、注冊組件，在App.vue( 或ComponentB)組件中要使用ComponentA，注冊ComponentA。（以下代碼中，由於App組件在main.js中使用，所以也需要導出）