1、父組件可以使用 props 把數據傳給子組件。
2、子組件可以使用 $emit 觸發父組件的自定義事件。

vm.$emit( event, arg ) //觸發當前實例上的事件

vm.$on( event, fn );//監聽event事件后運行 fn；

例如：子組件：

<template><div class="train-city"><h3>父組件傳給子組件的toCity:{{sendData}}</h3> <br/><button @click='select(`大連`)'>點擊此處將‘大連’發射給父組件</button></div>
</template>
<script>export default {name:'trainCity',props:['sendData'], // 用來接收父組件傳給子組件的數據methods:{select(val) {let data = {cityname: val};this.$emit('showCityName',data);//select事件觸發后，自動觸發showCityName事件}}}
</script>

父組件：

<template><div><div>父組件的toCity{{toCity}}</div><train-city @showCityName="updateCity" :sendData="toCity"></train-city></div>
<template>
<script>import TrainCity from "./train-city";export default {name:'index',components: {TrainCity},data () {return {toCity:"北京"}},methods:{updateCity(data){//觸發子組件城市選擇-選擇城市的事件this.toCity = data.cityname;//改變了父組件的值console.log('toCity:'+this.toCity)}}}
</script>

圖一：點擊之前的數據

圖二：點擊之后的數據