Vue.js記法(三)component機能拡張

テンプレート書出す：Vue.component()、Global登録

<div id="app">
  <my-element></my-element>　　　　　　<!--表現テンプレートを独立に書き出す-->
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>  
</div>
<script>
Vue.component('my-element', {
  template: '<strong>Hello</strong>'　/* コンポーネントのグローバル登録 */
})
Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })

var app= new Vue({
  el: '#app',
})
</script>
<!--グローバル登録後、app範囲に自由に利用可能。--->

Vue拡張Addon：Vue.extend()。local登録、利用範囲明確、サイズ軽減

<div id="app01">
  <component1></component1>
  <component-a></component-a>
  <component-b></component-b>
  <component-c></component-c>  
</div>
<script>
var component1 = Vue.extend({           　　/*コンポーネントの定義*/      
  template: '<strong>Hello!</strong>'
})
var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

var app= new Vue({
  el: '#app01',
  components:{
   'component1':componet1,
   'component-a':ComponentA,
   'component-b':ComponentB,
   'component-c':ComponentC,
  }
})
</script>

ローカル登録されたコンポーネントは、他のサブコンポーネント内では使用できない

Module化、システム内のローカル登録：import from/export default

// ローカル登録をする前に、使いたいコンポーネントごとにインポートする必要があります。
//ComponentB.vueよりComponentA.vueとComponentC.vueを利用したい場合、
// 以下の様に拡張子不要のimport comInstance from './file.vue' 
// export to default(自component)のcomponents属性に
import ComponentA from './ComponentA'
import ComponentC from './ComponentC'

export default {
  components: {
    ComponentA,
    ComponentC
  },
  // ...
}

DOM更新beforeFinish処理：Vue.nextTick(function(){...})

<div id="app01">
  <div>{{ message }}</div>
</div>
<script>
var app01= new Vue({
  el: '#app01',
  data: {
    message: 'Hello!',
    msg1: '',
    msg2: ''
  }
})
app01.message = 'Bye!'                /*textContentはv-text要素の内容*/  
console.log(app01.$el.textContent);   /* 出力値：hello */

Vue.nextTick(function() {
  console.log(app01.$el.textContent); /* 出力値：bye!*/
})
</script>