1、父組件可以使用 props 把數(shù)據(jù)傳給子組件。
2、子組件可以使用 $emit 觸發(fā)父組件的自定義事件。

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

vm.$on( event, fn );//監(jiān)聽event事件后運(yùn)行 fn；?

例如：子組件：

<template><div class="train-city"><h3>父組件傳給子組件的toCity:{{sendData}}</h3> <br/><button @click='select(`大連`)'>點擊此處將‘大連’發(fā)射給父組件</button></div> </template> <script>export default {name:'trainCity',props:['sendData'], // 用來接收父組件傳給子組件的數(shù)據(jù)methods:{select(val) {let data = {cityname: val};this.$emit('showCityName',data);//select事件觸發(fā)后，自動觸發(fā)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){//觸發(fā)子組件城市選擇-選擇城市的事件this.toCity = data.cityname;//改變了父組件的值console.log('toCity:'+this.toCity)}}} </script>

?

圖一：點擊之前的數(shù)據(jù)

?

圖二：點擊之后的數(shù)據(jù)

總結(jié)

以上是生活随笔為你收集整理的前端学习（2486）：$emit的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。