一、父=>子

父：

<div>
  <child :child-str="data"></child>
</div>

import child from './school-child';
export default {
    name: "parent",
    components:{child},
    data(){
      return {
        data:'我要向子元件傳遞資料'
      }
    },
}

子：（子元件通過props來接受資料）

<div>我是子元件，接收父元件傳遞過來的值-{{childStr}}</div>

export default {
    name: "child",
    props:{
      childStr:{
        type:String,
        default:'我是空的'//如果不傳值，顯示的值
      }
    }
  }

二、子=>父（通過觸發事件來改變元件的資料）

子：
<el-button @click="clickMe" type="primary">點選我傳值</el-button>

methods:{
  clickMe(){
    this.$emit('clickStr','傳遞的值')
  }
}

父
<child @clickStr="showChild"></child>
methods:{
  showChild(msg){
    console.log(msg);
  }
}

三、兄弟之間通訊(二者無關係)

兄弟之間通訊
需要公共例項來做為橋樑
bus.js
import Vue from 'vue'
export default new Vue();

兄弟一
import Bus from '../../config/bus'
Bus.$emit('xiongdi','兄弟')

兄弟二
import Bus from '../../config/bus'
Bus.$on('xiongdi',(arg) => {
        console.log(arg);
      })