vue中，孙子组件，向外祖父组件传递消息（多层组件之间传递数据）：

// 爷爷组件grandpa.vue:
	引入父亲组件：import parent from './parent.vue'
  <parent :money="money" @useMoney="useMoney" />
  component: {parent},
  data () {
    return {
      money: 10000
    }
  },
  methods: {
    useMoney (num) {
      this.money -= num
    }
  }
  
// 父亲组件parent.vue:
  引入儿子组件：import son from './son.vue'
  <son :money="money" />
  component: {son},
  props: {money: Number},  

// 儿子组件son.vue:
  引入孙子组件：import grandson from './grandson.vue'
  <grandson :money="money" />
  props: {money: Number},
  
// 孙子组件grandson.vue:
  <button @click="useMoney">use money</button>
  props: {money: Number},
  component: {son},
  methods: {
    useMoney () {
      // this.$parent.$parent.$emit('useMoney', 100) // 常规写法1
      this.$eventDispatch('useMoney', 100) // 自定义一个dispatch方法2
    }
  }
	
 上述事例中，中间隔了2代：孙子->儿子->父亲->爷爷，
 孙子直接调用爷爷组件中定义的方法、事件。展示了一个嵌套了4层父子关系多层组件之间的数据，
 自定义事件的例子。孙子组件中useMoney方法，
 直接触发了爷爷组件中引入的父亲组件parent中自定义方事件：
 useMoney (num) {
   this.money -= num
 }

 写法1是常规的写法，但是写法很麻烦，也很混乱。若有很多很多层，
 需要不停的往上找父级.$parent的步骤；
 写法2是企业中封装的dispatch方法，其作用是简化写法，省去中间若干的.$parent。
 

下面是自定义$eventDispatch的封装步骤：
vue中mian.js文件：
import { eventExtent } from './extends'
eventExtent(Vue) // 传入的是大写Vue的构造函数

然后在与mian.js同级目录，新建目录extends，目录结构:
/extends
	-> event.js
	-> index.js


event.js文件：
export default function (Vue) {
  Vue.prototype.$eventDispatch = function (name, value) {
    // 封装dispatch方法：child -> parent
    let parent = this.$parent
    while (parent) {
      parent.$emit(name, value)
      parent = parent.$parent
    }
  }
}

index.js文件：
import eventExtent from "./event";
export {
  eventExtent
}