亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue組件之間的數(shù)據(jù)共享詳解

 更新時(shí)間:2021年11月29日 16:41:06   作者:crystal_iwwish  
這篇文章主要為大家介紹了Vue組件之間的數(shù)據(jù)共享,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助

一、在項(xiàng)目開發(fā)中,組件之間的最常見的關(guān)系分為如下兩種:

1.父子關(guān)系

2.兄弟關(guān)系

1.1 父子組件之間的數(shù)據(jù)共享

父子組件之間的數(shù)據(jù)共享又分為:

1.?父 -> 子共享數(shù)據(jù)

子組件:

在這里插入圖片描述

父組件:

在這里插入圖片描述

2.子 -> 父共享數(shù)據(jù)

子組件向父組件共享數(shù)據(jù)使用自定義事件。示例代碼如下

子組件:

在這里插入圖片描述

父組件:

在這里插入圖片描述

頁(yè)面顯示結(jié)果:

在這里插入圖片描述

1.2 兄弟組件之間的數(shù)據(jù)共享

在 vue2.x 中,兄弟組件之間數(shù)據(jù)共享的方案是 EventBus

EventBus使用方法:

  • 創(chuàng)建 eventBus.js 模塊,并向外共享一個(gè) Vue 的實(shí)例對(duì)象
  • 在數(shù)據(jù)發(fā)送方,調(diào)用 bus.$emit(‘事件名稱', 要發(fā)送的數(shù)據(jù)) 方法觸發(fā)自定義事件
  • 在數(shù)據(jù)接收方,調(diào)用 bus.$on(‘事件名稱', 事件處理函數(shù)) 方法注冊(cè)一個(gè)自定義事件

示例:

1.創(chuàng)建 eventBus.js 模塊,并向外共享一個(gè) Vue 的實(shí)例對(duì)象

在這里插入圖片描述

2.?在數(shù)據(jù)發(fā)送方,調(diào)用 bus.$emit(‘事件名稱', 要發(fā)送的數(shù)據(jù)) 方法觸發(fā)自定義事件

在這里插入圖片描述

3.在數(shù)據(jù)接收方,調(diào)用 bus.$on(‘事件名稱', 事件處理函數(shù)) 方法注冊(cè)一個(gè)自定義事件

在這里插入圖片描述

總結(jié)

本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!

相關(guān)文章

  • vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒

    vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒

    時(shí)分秒都是跟月份一樣,從0開始數(shù)的,不用+1,因?yàn)樵率?-12月,而時(shí)分秒是0-23和0-59,下面這篇文章主要給大家介紹了關(guān)于vue中如何利用js函數(shù)截取時(shí)間的年月日時(shí)分秒的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • 一文帶你了解Vue數(shù)組的變異方法

    一文帶你了解Vue數(shù)組的變異方法

    Vue框架提供了一些便捷的數(shù)組變異方法,包括push、pop、shift、unshift、splice、sort和reverse等,Vue的數(shù)組變異方法可以自動(dòng)觸發(fā)DOM更新,本文就詳細(xì)帶大家了解一下Vue.js數(shù)組的變異方法
    2023-06-06
  • Vue項(xiàng)目中常用的工具函數(shù)總結(jié)

    Vue項(xiàng)目中常用的工具函數(shù)總結(jié)

    這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目中常用的工具函數(shù),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2021-09-09
  • 基于vue實(shí)現(xiàn)探探滑動(dòng)組件功能

    基于vue實(shí)現(xiàn)探探滑動(dòng)組件功能

    這篇文章主要介紹了基于vue實(shí)現(xiàn)探探滑動(dòng)組件功能,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-05-05
  • Vue NextTick介紹與使用原理

    Vue NextTick介紹與使用原理

    我們對(duì)Vue中data數(shù)據(jù)的修改會(huì)導(dǎo)致界面對(duì)應(yīng)的響應(yīng)變化,而通過(guò)nextTick方法,可以在傳入nextTick的回調(diào)函數(shù)中獲取到變化后的DOM,講起來(lái)可能還是有點(diǎn)夢(mèng)幻,下面我們直接使用nextTick體驗(yàn)一下效果
    2022-08-08
  • Vue組件公用方法提取mixin實(shí)現(xiàn)

    Vue組件公用方法提取mixin實(shí)現(xiàn)

    這篇文章主要介紹了Vue組件公用方法提取mixin實(shí)現(xiàn),多個(gè)組件共用一個(gè)方法時(shí)可以用?mixin?抽取到一個(gè)js文件中,作為共用方法,下面一起進(jìn)入文章了解更多詳細(xì)內(nèi)容吧
    2022-03-03
  • Vue3中使用vuedraggable拖拽實(shí)戰(zhàn)教程

    Vue3中使用vuedraggable拖拽實(shí)戰(zhàn)教程

    這篇文章主要介紹了Vue3中使用vuedraggable拖拽實(shí)戰(zhàn)教程,文中通過(guò)示例介紹了vue3拖拽組件vuedraggable的使用demo,需要的朋友可以參考下
    2023-06-06
  • vue日歷/日程提醒/html5本地緩存功能

    vue日歷/日程提醒/html5本地緩存功能

    這篇文章主要介紹了vue日歷/日程提醒/html5本地緩存功能,本文給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-09-09
  • Vue3報(bào)錯(cuò)‘defineProps‘?is?not?defined的解決方法

    Vue3報(bào)錯(cuò)‘defineProps‘?is?not?defined的解決方法

    最近工作中遇到vue3中使用defineProps中報(bào)錯(cuò),飄紅,所以這篇文章主要給大家介紹了關(guān)于Vue3報(bào)錯(cuò)‘defineProps‘?is?not?defined的解決方法,需要的朋友可以參考下
    2023-01-01
  • Vue中的父子組件傳值.sync

    Vue中的父子組件傳值.sync

    這篇文章主要介紹了Vue中的父子組件傳值.sync,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-12-12

最新評(píng)論