Vue.js之$emit用法案例詳解

更新時(shí)間：2021年09月14日 14:24:22 作者：榴蓮不好吃

這篇文章主要介紹了Vue.js之$emit用法案例詳解,本篇文章通過簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下

1、父組件可以使用 props 把數(shù)據(jù)傳給子組件。

2、子組件可以使用 $emit 觸發(fā)父組件的自定義事件。

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

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

例如：子組件：

<template>
  <div class="train-city">
    <h3>父組件傳給子組件的toCity:{{sendData}}</h3> 
    <br/><button @click='select(`大連`)'>點(diǎn)擊此處將‘大連'發(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ā)后，自動(dòng)觸發(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>

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

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

到此這篇關(guān)于Vue.js之$emit用法案例詳解的文章就介紹到這了,更多相關(guān)Vue.js之$emit用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

Vue.js
$emit

相關(guān)文章

vue+uniapp瀑布流布局多種實(shí)現(xiàn)方式示例代碼
由于使用uniapp開發(fā)的微信小程序不需要考慮響應(yīng)式,因此瀑布流的實(shí)現(xiàn)相對(duì)于pc端更為簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于vue+uniapp瀑布流布局多種實(shí)現(xiàn)方式的相關(guān)資料,需要的朋友可以參考下
2023-03-03
design vue 表格開啟列排序的操作
這篇文章主要介紹了design vue 表格開啟列排序的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2020-10-10
vue+echarts實(shí)現(xiàn)中國(guó)地圖流動(dòng)效果(步驟詳解)
這篇文章主要介紹了vue+echarts實(shí)現(xiàn)中國(guó)地圖流動(dòng)效果(步驟詳解),本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2021-01-01
vue整合項(xiàng)目中百度API示例詳解
這篇文章主要為大家介紹了vue整合項(xiàng)目中百度API示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-09-09
詳解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南
這篇文章主要介紹了詳解Vue SSR（ Vue2 + Koa2 + Webpack4）配置指南，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-11-11
Vue3如何在setup中獲取元素引用(ref)
這篇文章主要介紹了Vue3如何在setup中獲取元素引用(ref)問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-07-07
淺析Vue3中的邏輯復(fù)用
這篇文章主要為大家詳細(xì)介紹了Vue3中邏輯復(fù)用的相關(guān)知識(shí),文中的示例代碼簡(jiǎn)潔易懂,對(duì)我們深入了解Vue3有一定的幫助,需要的小伙伴可以參考下
2023-12-12
在vue中使用v-bind:class的選項(xiàng)卡方法
今天小編就為大家分享一篇在vue中使用v-bind:class的選項(xiàng)卡方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
如何用vue-cli3腳手架搭建一個(gè)基于ts的基礎(chǔ)腳手架的方法
這篇文章主要介紹了如何用vue-cli3腳手架搭建一個(gè)基于ts的基礎(chǔ)腳手架的方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
Vue3+Vite4項(xiàng)目進(jìn)行性能優(yōu)化的配置方案
這篇文章主要為大家詳細(xì)介紹了Vue3如何結(jié)合Vite4對(duì)項(xiàng)目進(jìn)行性能優(yōu)化的相關(guān)配置,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2025-04-04