[Vue2][練習]使用requireJS建立Component+$emit語法

this.$emit('event name', value);
子層向父層呼叫Method的方法。

app.js內定義各個js的部分就省略吧！主要程式碼如下：-
index.html (部分)

<div id="app">
  <component is="header-menu" @header-menu-event="onHeaderMenuClick"></component>
</div>

-
main.js

define(function (require) {
  var Vue = require("vue");
  var CreateComponent = require('./loadComponent');  //自己寫的讀取component js的方法，偷懶(縮短程式碼)用，沒甚麼技巧XD
  Vue.component('header-menu', CreateComponent("./header-menu"));
  new Vue({
    el : '#app' ,
    data:{
      itemName:''
    },
    methods:{
      onHeaderMenuClick (tab){
        this.itemName = tab;
        this.setStyleFile();
        console.log("itemName = "+tab);
      }
    }
  });
});

-
header-menu.js

define(function (r) {
  return {
    data: function(){
      return {
        menu:[
           {id: 0, text:'itemA'},
           {id: 1, text:'itemB' },
           {id: 2, text:'itemC' }
        ],
        itemID : 0,
      }
    },
    methods:{
      onHeaderMenuClick (id){
        if (id != this.itemID){
           this.itemID = id;
           this.$emit('header-menu-event', this.menu[id].text.toLowerCase()); //call parent event
        }
      }
    },
    template: '<div id="header-menu"><div id="header-menu-line"><div class="header-menu-item" v-for="item in menu" v-bind:key="item.id" v-bind:class="[{ active: itemID === item.id }]" v-on:click="onHeaderMenuClick(item.id)" >{{item.text}}</div></div></div>'  
  }
});

-


子層呼叫父層的推薦文章：
(官方)Customizing Component v-model
vue & vuex 16 - 自訂按鈕 custom checkbox ($emit, $on)

-
index.html

-