国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

整理4種Vue組件通信方式

MingjunYang / 2692人閱讀

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

整理4種Vue組件通信方式

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

父子組件的通信

非父子組件的eventBus通信

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

Vuex通信

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

父組件一共需要做4件事

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

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

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

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

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

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

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

子組件只需要做1件事

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

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

   // 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)用子組件時(shí),定義事件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ā)即可,第二個(gè)參數(shù)可以傳遞參數(shù)
        methods: {
            increment(){
                    this.number++
                    this.$emit("changeNumber", this.number)
                },
        }
第二種通信方式: eventBus

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

但是因?yàn)槭欠歉缸咏M件的關(guān)系,他們需要有一個(gè)中間組件來連接。

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

使用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

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

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

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

第四種通信方式: 利用Vuex

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/107278.html

相關(guān)文章

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

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

    e10101 評(píng)論0 收藏0

  • vuejs組件通信精髓歸納

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

    妤鋒シ 評(píng)論0 收藏0

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

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

    sutaking 評(píng)論0 收藏0

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

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

    khs1994 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<