1、在vue中父元件是通過props傳遞資料給子元件

<child-component :prop1="父元件的資料1" :prop2="父元件的資料2"></child-component>

子元件只接受在子元件中定義過的props的值，

Vue.component('child-component', {
  props: ['prop1', 'prop2'], // 定義接收哪些 props
  template: '<div>{{prop1 + prop2}}</div>',
  ...
}

2、父元件呼叫子元件屬性或方法
首先在元件的根元素上通過ref給取個名字，例如：

<child-component ref="aName"></child-component>

然後父元件就可以通過該名稱獲取到這個元件物件，從而呼叫裡面的屬性與方法：

var comp = this.$refs.name;
name.attr;
name.method();

父元件可以通過$children，獲取到所有的直接子元件，不包括孫元件；不保證順序，不是響應式的

3、子元件傳遞資料給父元件----自定義事件
父元件通過v-on在子元件使用的地方監聽子元件觸發的事件：

<div id="counter-event-example">
  <p>{{ total }}</p>
//increment是子元件中的事件，意思就是在子元件中increment執行的時候，執行父元件中的incrementTotal方法
  <button-counter v-on:increment="incrementTotal"></button-counter>
  <button-counter v-on:increment="incrementTotal"></button-counter>
</div>
new Vue({
  el: '#counter-event-example',
  data: {
    total: 0
  },
  methods: {
    incrementTotal: function (arg) {
      this.total += 1
    }
  }
})
 

然後在子元件中使用$emit()主動丟擲事件：

Vue.component('button-counter', {
  template: '<button v-on:click="increment">{{ counter }}</button>',
  data: function () {
    return {
      counter: 0
    }
  },
  methods: {
    increment: function () {
      this.counter += 1
      this.$emit('increment')
       //傳遞引數
       //this.$emit('increment',arg) 
    }
  },
})
 

當然如果你想在元件根元素上使用原生事件，可以使用.native修飾符
另外子元件呼叫父元件事件則可以使用$parent或者$root，詳見vue文件；

4、非父子

簡單情況下我們可以通過使用一個空的Vue例項作為中央事件匯流排

**main.js**
let bus = new Vue()
Vue.prototype.bus = bus

**header元件**
<template>
    <header @click="changeTitle">{{title}}</header>
</template>
<script>
export default {
    name: 'header',
    data () {
        return {
            title: '頭部'
        }
    },
    methods: {
        changeTitle () {
            this.bus.$emit('toChangeTitle','首頁')
        }
    }
}
</script>

**footer元件**
<template>
    <footer>{{txt}}</footer>
</template>
<script>
export default {
    name: 'footer',
    mounted () {
        this.bus.$on('toChangeTitle', function (title) {
            console.log(title)
        })
    },
    data () {
        return {
            txt: '尾部'
        }
    }
}