Vue Component Register

在建立 Vue Instance 之後，如需要使用其他以定義過的Component

就必須把建立好的Component各別註冊不同的名字，再來進行使用

而註冊分為global跟local

顧名思義

global註冊就是全域的Component，可以在所有的其他Component或Instance內使用

local註冊就是區域的Component，會註冊在某個Component或是Instance內，

所以只能在該component或instance內使用

參考文件

global register

一般，如果是常用的Component通常會註冊為global

範例 如下：

HTML部分：

<div id="app"/>

javascript部分：

Vue.component('prompt-compo', {
  template: '<div><p>${message}</p><button @click="sayHi">say Hi!</button></div>',
  delimiters: ['${','}'],
  data: function(){
    return {
      message: 'Hi , test'
    }
  },
  methods: {
    sayHi: function() {
      alert('Hi');
    }
  }
});

let vm = new Vue({
  el:'#app',
  template: `<prompt-compo/>`
});

src code

local register

架設這個component只需要在某些特殊component才使用

那就可以利用在需要的地方在動態import即可

好處是可以減少bundle的size，也避免全域污染的問題

範例如下：

<div id="app"/>

const PromptComponent = {
  template:'<div><p>${message}</p><button @click="sayHi">say Hi!</button></div>',
  delimiters: ['${','}'],
  data: function() {
    return {
      message: 'say hi test'
    }
  },
  methods: {
    sayHi: function() {
      alert('hi test');
    }
  }
};
let vm = new Vue({
  el:'#app',
  components: {
    'prompt-component':PromptComponent
  },
  template: `<prompt-component/>`
});

src code