成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

整理4種Vue組件通信方式

MingjunYang / 2702人閱讀

摘要：整理種組件通信方式重點是梳理了前兩個父子組件通信和通信我覺得文檔里的說明還是有一些簡易我自己第一遍是沒看明白。第四種通信方式利用比較復(fù)雜可以多帶帶寫一篇

整理4種Vue組件通信方式

重點是梳理了前兩個,父子組件通信和eventBus通信,我覺得Vue文檔里的說明還是有一些簡易,我自己第一遍是沒看明白。

父子組件的通信

非父子組件的eventBus通信

利用本地緩存實現(xiàn)組件通信

Vuex通信

第一種通信方式:父子組件通信 父組件向子組件傳遞數(shù)據(jù)

父組件一共需要做4件事

1.import son from "./son.js" 引入子組件 son

2.在components : {"son"} 里注冊所有子組件名稱

3.在父組件的template應(yīng)用子組件,

4.如果需要傳遞數(shù)據(jù)給子組件,就在template模板里寫 

 // 1.引入子組件
 
     import counter from "./counter"
     import son from "./son"
// 2.在ccmponents里注冊子組件

    components : {
        counter,
        son
    },
// 3.在template里使用子組件

   
 // 4.如果需要傳遞數(shù)據(jù),也是在templete里寫

子組件只需要做1件事

1.用props接受數(shù)據(jù),就可以直接使用數(shù)據(jù)

2.子組件接受到的數(shù)據(jù),不能去修改。如果你的確需要修改,可以用計算屬性,或者把數(shù)據(jù)賦值給子組件data里的一個變量

   // 1.用Props接受數(shù)據(jù)
      props: [
               "num"
           ],
   
// 2.如果需要修改得到的數(shù)據(jù),可以這樣寫
   props: [
            "num"
        ],
  data () {
        return {
            number : this.num
        }
    },
子組件向父組件傳遞數(shù)據(jù)

父組件一共需要做2件事情

在template里定義事件

在methods里寫函數(shù),監(jiān)聽子組件的事件觸發(fā)

// 1. 在templete里應(yīng)用子組件時,定義事件changeNumber
      
      
// 2. 用changeNumber監(jiān)聽事件是否觸發(fā)
        methods: {
            changeNumber(e){
                console.log("子組件emit了",e);
                this.number = e
            },
        }

子組件一共需要1件事情

在數(shù)據(jù)變化后,用$emit觸發(fā)即可

// 1. 子組件在數(shù)據(jù)變化后,用$emit觸發(fā)即可,第二個參數(shù)可以傳遞參數(shù)
        methods: {
            increment(){
                    this.number++
                    this.$emit("changeNumber", this.number)
                },
        }
第二種通信方式: eventBus

eventBus這種通信方式,針對的是非父子組件之間的通信,它的原理還是通過事件的觸發(fā)和監(jiān)聽。

但是因為是非父子組件的關(guān)系,他們需要有一個中間組件來連接。

我是使用的通過在根組件,也就是#app組件上定義了一個所有組件都可以訪問到的組件,具體使用方式如下

使用eventBus傳遞數(shù)據(jù),我們一共需要做3件事情

1.給app組件添加Bus屬性 (這樣所有組件都可以通過this.$root.Bus訪問到它,而且不需要引入任何文件)

2.在組件1里,this.$root.Bus.$emit觸發(fā)事件

3.在組件2里,this.$root.Bus.$on監(jiān)聽事件

// 1.在main.js里給app組件,添加bus屬性
import Vue from "vue"

new Vue({
  el: "#app",
  components: { App },
  template: "",
  data(){
    return {
      Bus : new Vue()
    }
  }
})

// 2.在組件1里,觸發(fā)emit

increment(){
        this.number++
        this.$root.Bus.$emit("eventName", this.number)
    },

// 3.在組件2里,監(jiān)聽事件,接受數(shù)據(jù)

mounted(){
    this.$root.Bus.$on("eventName", value => {
        this.number = value
        console.log("busEvent");
    })
},
第三種通信方式: 利用localStorage或者sessionStorage

這種通信比較簡單,缺點是數(shù)據(jù)和狀態(tài)比較混亂,不太容易維護。

通過window.localStorage.getItem(key) 獲取數(shù)據(jù)
通過window.localStorage.setItem(key,value) 存儲數(shù)據(jù)

注意用JSON.parse() / JSON.stringify() 做數(shù)據(jù)格式轉(zhuǎn)換。

第四種通信方式: 利用Vuex

Vuex比較復(fù)雜,可以多帶帶寫一篇

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107278.html

相關(guān)文章

  • VUE組件化開發(fā)的精髓

    摘要：開篇的簡單介紹和演示的開發(fā)精髓組件組件的三個組件之間的通信方式實例講解銖寶益幫助中心前端組件開篇的簡單介紹和演示發(fā)布于年，是一個漸進(jìn)式的框架，同時也是一個輕量級的框架，它只關(guān)心數(shù)據(jù)，從而讓開發(fā)者不用過多的關(guān)注的改變和操作，的作者為尤雨溪， 開篇：vue.js的簡單介紹和演示 vue的開發(fā)精髓-組件 vue組件的三個API：prop、event、slot 組件之間的通信方式 實例講解：銖寶益幫...

    e10101 評論0 收藏0

  • vuejs組件通信精髓歸納

    摘要：組件的通信和和內(nèi)置的通信手段一般有兩種給元素或組件注冊引用信息訪問父子實例。有時候兩個組件之間需要進(jìn)行通信，但是它們彼此不是父子組件的關(guān)系。詳情可參考參考組件之間種組件通信方式總結(jié)參考參考 組件的分類 常規(guī)頁面組件，由 vue-router 產(chǎn)生的每個頁面，它本質(zhì)上也是一個組件（.vue），主要承載當(dāng)前頁面的 HTML 結(jié)構(gòu)，會包含數(shù)據(jù)獲取、數(shù)據(jù)整理、數(shù)據(jù)可視化等常規(guī)業(yè)務(wù)。 功能性抽...

    妤鋒シ 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<