• <nav id="dstbx"></nav>

    <nav id="dstbx"></nav>
    1. <form id="dstbx"></form>
    2. <small id="dstbx"></small>

      教育行業A股IPO第一股(股票代碼 003032)

      全國咨詢/投訴熱線:400-618-4000

      項目開發中組件之間的數據共享【前端技術文章】

      更新時間:2021年12月03日18時44分 來源:傳智教育 瀏覽次數:

      好口碑IT培訓
      在項目開發中,組件之間的關系有父子關系、兄弟關系和后代關系三種,各種組件關系之間的數據共享方式和方法都不盡相同,本節就來看一下組件間數據共享的過程。

      1.父組件和子組件之間共享數據
      父組件通過v-bind 屬性綁定向子組件共享數據。同時,子組件需要使用props 接收數據。示例代碼如下:

      子組件通過自定義事件的方式向父組件共享數據。示例代碼如下:


      2.父子組件之間數據的雙向同步
      父組件在使用子組件期間,可以使用v-model 指令維護組件內外數據的雙向同步:
      3.兄弟組件之間的數據共享
      兄弟組件之間實現數據共享的方案是EventBus??梢越柚诘谌降陌黰itt 來創建eventBus 對象,從而實現兄弟組件之間的數據共享。示意圖如下:

      在項目中運行如下的命令,安裝mitt 依賴包,

      創建公共的EventBus 模塊,在項目中創建公共的eventBus 模塊如下:
      4.在數據接收方自定義事件
      在數據接收方,調用bus.on('事件名稱', 事件處理函數) 方法注冊一個自定義事件。示例代碼如下:


      在數據接發送方觸發事件
      在數據發送方,調用bus.emit('事件名稱', 要發送的數據) 方法觸發自定義事件。示例代碼如下:



      5.后代關系組件之間的數據共享
      后代關系組件之間共享數據,指的是父節點的組件向其子孫組件共享數據。此時組件之間的嵌套關系比較復雜,可以使用provide和inject實現后代關系組件之間的數據共享。

      猜你喜歡:

      vue組件三大部分: template、script、style

      什么是Bootstrap組件?組件有什么優勢?

      Swing文本組件JTextField和JTextArea有哪些區別?

      JDBC程序具體實現步驟演示【Java技術文章】

      傳智教育java高級軟件工程師培訓

      0 分享到:
      神马影院我不卡