組件通訊的方式有哪些

来源:https://www.cnblogs.com/zhanghaoqing/archive/2022/06/25/16411864.html
-Advertisement-
Play Games

props傳遞數據 步驟: 首先,在子組件中聲明props選項 其次,在子組件中使用v-bind指令動態綁定屬性,通過插值表達式動態獲取數據 最後,在父組件的template中調用子組件標簽的使用傳遞數據 示例: 在子組件MovieItem.vue中 <template> <div class="s ...


  • props傳遞數據

步驟:

  • 首先,在子組件中聲明props選項

  • 其次,在子組件中使用v-bind指令動態綁定屬性,通過插值表達式動態獲取數據

  • 最後,在父組件的template中調用子組件標簽的使用傳遞數據

示例:

 在子組件MovieItem.vue中

<template>
  <div class="series-item-box">
    <div>
      <img
        :src="imgpath"
      />
    </div>
    <div class="detail">
      <div class="detail-title">{{title}}</div>
      <div class="detail-score">{{score}}</div>
    </div>
  </div>
</template>

<script>
export default {
    props:['imgpath','title','score']
};
</script>

在父組件MovieList.vue中

<template>
    <div>
        <movie-item 
            imgpath="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2455050536.jpg"
            title="大話西游之大聖娶親"
            score="9.6"/>
        <movie-item 
            imgpath="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2614949805.jpg"
            title="哈利·波特與魔法"
            score="9.0"/>
        <movie-item 
            imgpath="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2614359276.jpg"
            title="當幸福來敲門"
            score="9.3"/>
    </div>
</template>

<script>
import MovieItem from './MovieItem.vue'
export default {
    components:{
        MovieItem
    }
}
  • 自定義事件及$emit方法

語法:this.$emit('event',val)

步驟:

  • 首先,子組件在觸發事件時調用this.$emit()設置自定義事件並傳值

  • 其次,在父組件引用子組件標簽時使用@自定義事件=“接受子組件傳遞數據的方法”設置接受方法

  • 最後,在父組件中使用接受方法中獲取數據並使用

在子組件中

<template>
  <div class="series-item-box">
    <div class="pic">
      <img
        :src="imgpath"
      />
    </div>
    <div class="detail">
      <div class="detail-title">{{title}}</div>
      <div class="detail-score">{{score}}</div>
    </div>
    <div>
        <button @click="bookTicket">購票</button>
    </div>
  </div>
</template>

<script>
export default {
    props:['imgpath','title','score'],
    methods:{
        bookTicket(){
            this.$emit('make',this.title)
        }
    }
};
</script>

在父組件中

<template>
    <div>
        <movie-item 
            imgpath="https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2614359276.jpg"
            title="當幸福來敲門"
            score="9.3"
            @make="getval"/>
    </div>
</template>

<script>
import MovieItem from './MovieItem.vue'
export default {
    components:{
        MovieItem
    },
    methods:{
        getval(val){
           console.log(val);
        }
    }
}
</script>
  • 事件匯流排

步驟:

  • 創建eventBus.js模塊,並向外共用一個Vue的實例對象

  • 在數據發送方,調用bus.$emit('事件名稱',要發送的數據)方法觸發自定義事件

  • 在數據接收方,調用bus.$on('事件名稱',事件處理函數)方法註冊一個自定義事件

新建 eventBus.js

import Vue from 'vue'
export default new Vue();

數據發送方

<template>
    <button @click="send">發送數據</button>
</template>
<script>
import bus from './eventBus.js'
export default {
    data(){
        return{
            msg:'故人西辭黃鶴樓'
        }
    },
    methods:{
        send(){
            bus.$emit('share',this.msg)
        }
    }
}
</script>

數據接收方

<template>
    <h2>{{fromsendMsg}}</h2>
</template>
<script>
import bus from './eventBus.js'
export default {
    data(){
        return{
            fromsendMsg:''
        }
    },
    created(){
        bus.$on('share',val=>{
            this.fromsendMsg=val;
        })
    }
}
</script>

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • ## 電腦性能設置 優化設置一:開啟卓越性能 其實,win10系統中有一個卓越性能的隱藏設置,它可以讓我們的電腦,在現有配置的情況下,發揮出最優良的性能。 1、 同時按住“win+R”打開運行視窗,輸入“powershell”並點擊“確定” 2、 打開命令提示符頁面後,輸入並執行以下字元,就會出現 ...
  • 寫在前面: 這幾天留校,在做一個電機驅動的項目,使用的是合肥傑發的平臺,車規級晶元AC7801/11系列晶元。 但在進行模擬和程式燒錄的時候遇到了各種問題,藉助這個機會,私下裡總結了常見的模擬與燒錄程式常見的幾種方式,以及相關的操作,希望對大家有幫助。 單片機ISP、IAP和ICP幾種燒錄方式的區別 ...
  • 對於 MySQL 資料庫作為各個業務系統的存儲介質,在系統中承擔著非常重要的職責,如果資料庫崩了,那麼對於讀和寫資料庫的操作都會受到影響。如果不能迅速恢復,對業務的影響是非常大的。本文我將分享MySQL 雙主 + Keepalived 的高可用落地和踩坑之路。 ...
  • 1、簡述 binlog 二進位日誌文件,這個文件記錄了MySQL所有的DML操作。通過binlog日誌我們可以做數據恢復,增量備份,主主複製和主從複製等等。 2、Docker中無法使用vim問題解決 https://blog.csdn.net/Tomwildboar/article/details/ ...
  • 當用戶有跨語種交流或音頻內容翻譯的需求時,應用需要能自動檢測語音內容再輸出為用戶需要的語言文字。 HMS Core機器學習服務提供同聲傳譯能力,同聲傳譯實現將實時輸入的長語音實時翻譯為不同語種的文本以及語音,並實時輸出原語音文本、翻譯後的文本以及翻譯文本的語音播報。 在直播類,會議類的應用中,同聲傳 ...
  • Android multiple back stacks導航 談談android中多棧導航的幾種實現. 什麼是multiple stacks 當用戶在app里切換頁面時, 會需要向後回退到上一個頁面, 頁面歷史被保存在一個棧里. 在Android里我們經常說"back stack". 有時候在app ...
  • 瞭解響應式原理後對代碼的一點小重構 在操作一個響應式變數的時候,可能會多次去取這個響應式變數的值,這就意味著會多次執行依賴收集中的get,可以用一個局部變數緩存下來,這樣只需要一次get操作. // 比如商城業務中,根據價格篩選不同的商品 data: () => ({ goods: [] }), c ...
  • TypeScript 是一種由微軟開發的自由和開源的編程語言,是一種非常受歡迎的 JavaScript 語言擴展,它也是 JavaScript 的一個超集,而且本質上向這個語言添加了可選的靜態類型和基於類的面向對象編程。它在現有的 JavaScript 語法之上加入了一層類型層,而這一層即使被刪除, ...
一周排行
    -Advertisement-
    Play Games
  • 一:背景 準備開個系列來聊一下 PerfView 這款工具,熟悉我的朋友都知道我喜歡用 WinDbg,這東西雖然很牛,但也不是萬能的,也有一些場景他解決不了或者很難解決,這時候藉助一些其他的工具來輔助,是一個很不錯的主意。 很多朋友喜歡在項目中以記錄日誌的方式來監控項目的流轉情況,其實 CoreCL ...
  • 本來閑來無事,準備看看Dapper擴展的源碼學習學習其中的編程思想,同時整理一下自己代碼的單元測試,為以後的進一步改進打下基礎。 突然就發現問題了,源碼也不看了,開始改代碼,改了好久。 測試Dapper.LiteSql數據批量插入的時候,耗時20秒,感覺不正常,於是我測試了非Dapper版的Lite ...
  • 需求如下,在DEV框架項目中,需要在表格中增加一列顯示圖片,並且能編輯該列圖片,然後進行保存等操作,最終效果如下 這裡使用的是PictureEdit控制項來實現,打開DEV GridControl設計器,在ColumnEdit選擇PictureEdit: 綁定圖片代碼如下: DataTable dtO ...
  • 前兩天微軟偷偷更新了Visual Studio 2022 正式版版本 17.3 發佈,發佈摘要: MAUI 工作負荷 GA 生成 MAUI/Blazor CSS 熱重載支持 現在,你將能夠使用我們的新增功能在 Visual Studio 中使用每個更新試用一系列新功能。 選擇每個功能以瞭解有關特定功 ...
  • 航天和軍工領域的數字化轉型和建設正在積極推進,在與航天二院、航天三院、航天六院、航天九院、無線電廠、兵工廠等單位交流的過程中,用戶更聚焦試驗和生產過程中的痛點,迫切需要解決軟體平臺統一監測和控制設備及軟體與設備協同的問題。 ...
  • .NET 項目預設情況下 日誌是使用的 ILogger 介面,預設提供一下四種日誌記錄程式: 控制台 調試 EventSource EventLog 這四種記錄程式都是預設包含在 .NET 運行時庫中。關於這四種記錄程式的詳細介紹可以直接查看微軟的官方文檔 https://docs.microsof ...
  • 一:背景 上一篇我們聊到瞭如何去找 熱點函數,這一篇我們來看下當你的程式出現了 非托管記憶體泄漏 時如何去尋找可疑的代碼源頭,其實思路很簡單,就是在 HeapAlloc 或者 VirtualAlloc 時做 Hook 攔截,記錄它的調用棧以及分配的記憶體量, PerfView 會將這個 分配量 做成一個 ...
  • 背景 在 CI/CD 流程當中,測試是 CI 中很重要的部分。跟開發人員關係最大的就是單元測試,單元測試編寫完成之後,我們可以使用 IDE 或者 dot cover 等工具獲得單元測試對於業務代碼的覆蓋率。不過我們需要一個獨立的 CLI 工具,這樣我們才能夠在 Jenkins 的 CI 流程集成。 ...
  • 一、應用場景 大家在使用Mybatis進行開發的時候,經常會遇到一種情況:按照月份month將數據放在不同的表裡面,查詢數據的時候需要跟不同的月份month去查詢不同的表。 但是我們都知道,Mybatis是ORM持久層框架,即:實體關係映射,實體Object與資料庫表之間是存在一一對應的映射關係。比 ...
  • 我國目前並未出台專門針對網路爬蟲技術的法律規範,但在司法實踐中,相關判決已屢見不鮮,K 哥特設了“K哥爬蟲普法”專欄,本欄目通過對真實案例的分析,旨在提高廣大爬蟲工程師的法律意識,知曉如何合法合規利用爬蟲技術,警鐘長鳴,做一個守法、護法、有原則的技術人員。 案情介紹 深圳市快鴿互聯網科技有限公司 2 ...