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>

?

圖一：點擊之前的數據

?

圖二：點擊之后的數據

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。