親のVue にコンポーネントを登録することで、子のイベントを管理できる

コンポーネント作成（変数）

var コンポーネント変数 = Vue.extend({
      template: 'HTML',    //methods で登録したメソッドを実行可能
      data: function () { return { データ名 : 値 } },   //コンポーネント内で利用できる変数を登録
      methods: { コンポーネント内のメソッド }    //template 内で利用可能
)}

親に登録しない場合は、Vue.component() でもよい

var コンポーネント変数 = Vue.component('counter-button', {
      template: 'HTML',
      data: function () { return { データ名 : 値 } },
      methods: { コンポーネント内のメソッド }
})

コンポーネント登録

new Vue({
    el: "#id",
    components : { 'HTMLタグ名' : コンポーネント変数 }, //タグ名はケバブケース（kebab-case）
    data: { オブジェクト }  //Element内のオブジェクト
    methods: { メソッド }  //Element内のメソッド
}

サンプル（Vue.js入門 基礎から実践アプリケーション開発まで：第3章）

HTML

  

    

      {{fruit.name}}
      :
      
     //v-on:increment カスタムイベント設定し、他のメソッドを実行
    
    
Total: {{total}}
  

Javascript

    var counterButton = Vue.extend({
      template: '{{counter}} amounts Add',
      data: function () {
        return {
          counter: 0
        }
      },
      methods: {
        addToCart: function () {
          this.counter += 1
          this.$emit('increment') //add custom event
        }
      }
    })
    new Vue({
      el: '#fruits-counter',
      components: {
        'counter-button': counterButton
      },
      data: {
        total: 0,
        fruits: [
          { name: 'Pear'},
          { name: 'Strawbery'}
        ]
      },
      methods: {
        incrementCartStatus: function() {
          this.total += 1
        }
      }
    });