Vue-101-Day 13

Component註冊時，都會需要給予名稱，以下範例所用的方式即為全域註冊。

Vue.component('custom-input', {
  props: ['value'],
  template: `
  <input
    v-bind:value="value"
    v-on:input="$emit('input', $event.target.value)"
  />
  `
})

命名規則

kebab-case：皆用小寫命名，單字之間以 - 隔開。 e.g：custom-input
```
Vue.component('my-component-a', {
...
})
```
PascalCase：首單字的字母大寫。 e.g：CustomInput
```
Vue.component('MyComponentB', {
...
})
```

註：但是DOM上還是使用kebab-case

全域註冊

目前為止都是使用Vue.component方式註冊Component，也就是Global registration，亦即註冊後，可以在Vue Instance使用。

Vue.component('my-component-a', {
  props: ['msg'],
  template: `
  <h3>my-component-a： {{ msg }}</h3>
  `
})

Vue.component('MyComponentB', {
  props: ['msg'],
  template: `
  <h3>MyComponentB： {{ msg }}</h3>
  `
})

var vm20 = new Vue({
  el: '#app-20'
})

<div id="app-20">
  <my-component-a msg="I am A"></my-component-a>
  <my-component-b msg="I am B"></my-component-b>
</div>

輸出結果

my-component-a： I am A
MyComponentB： I am B

區域註冊

會先定義Component，接著使用在Vue Instance並定義在components裡

var ComponentA = {
  props: ['msg'],
  template: `
  <h3>local ComponentA： {{ msg }}</h3>
  `
}

var ComponentB = {
  props: ['msg'],
  template: `
  <h3>local ComponentB： {{ msg }}</h3>
  `
}

var vm20 = new Vue({
  el: '#app-20',
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
})

輸出結果

local ComponentA： I am A
local ComponentB： I am B

在元件中使用另一個元件

有時候會需要在一個元件中套用另一個元件，這時候需要確認

先定義好元件
母元件使用子元件，也是註冊在components
在母元件template中套用子元件
Vue Instance實例及HTML只需註冊母元件

var ComponentA = {
  props: ['msg'],
  template: `
  <h3>local ComponentA： {{ msg }}</h3>
  `
}

var ComponentB = {
  props: ['msg'],
  components: {
    'component-a': ComponentA
  },
  template: `
  <div>
    <component-a msg="Hi~~~"></component-a>
    <h3>local ComponentB： {{ msg }}</h3>
  </div>
  `
}

var vm20 = new Vue({
  el: '#app-20',
  components: {
    'component-b': ComponentB
  }
})

<div id="app-20">
  <component-b msg="I am B"></component-b>
</div>

使用module

在ES6中可以使用import、export module方式套用元件。

1 註冊 Component

<template>
  <h2>Question Box</h2>
</template>

<script>
export default {
  name: 'questionbox'
}
</script>

2 import module

<template>
  <div class="hello">
    <QuestionBox/>
    <h1></h1>
  </div>
</template>

<script>
import QuestionBox from './QuestionBox'

export default {
  name: 'HelloWorld',
  components: {
    QuestionBox
  },
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1,
h2 {
  font-weight: normal;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

局部註冊Component

例：在HelloWorld.Vue使用QuestionBox.Vue元件

HelloWorld.Vue

import QuestionBox from './QuestionBox'

export default {
  name: 'HelloWorld',
  components: {
    QuestionBox
  },
  data() {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}

全域註冊Component

例：Global使用Header.Vue元件，於main.js註冊Vue.component

main.js

import Header from './components/Header'

Vue.component('header-component', Header)
...

var ComponentA = {
  props: ['msg'],
  template: `
  <div>
    <header-component></header-component>
    <h3>local ComponentA: {{ msg }}</h3>
  </div>
  `
}

var vm20 = new Vue({
  el: '#app-20',
  components: {
    'component-a': ComponentA
  }
})

<div id="app-20">
  <component-a msg="I am A"></component-a>
</div>

View

參考資料：

Component Registration

Coding Diary