亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

整理4種Vue組件通信方式

MingjunYang / 2754人閱讀

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

整理4種Vue組件通信方式

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

父子組件的通信

非父子組件的eventBus通信

利用本地緩存實現組件通信

Vuex通信

第一種通信方式:父子組件通信 父組件向子組件傳遞數據

父組件一共需要做4件事

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

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

3.在父組件的template應用子組件,

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

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

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

   
 // 4.如果需要傳遞數據,也是在templete里寫

子組件只需要做1件事

1.用props接受數據,就可以直接使用數據

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

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

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

在template里定義事件

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

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

子組件一共需要1件事情

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

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

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

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

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

使用eventBus傳遞數據,我們一共需要做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)聽事件,接受數據

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

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

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

注意用JSON.parse() / JSON.stringify() 做數據格式轉換。

第四種通信方式: 利用Vuex

Vuex比較復雜,可以多帶帶寫一篇

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

轉載請注明本文地址：http://www.ezyhdfw.cn/yun/107278.html

相關文章

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

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

    e10101 評論0 收藏0

  • vuejs組件通信精髓歸納

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

    妤鋒シ 評論0 收藏0

  • 關于Vue2一些值得推薦的文章 -- 五、六月份

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

    sutaking 評論0 收藏0

  • 關于Vue2一些值得推薦的文章 -- 五、六月份

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

    khs1994 評論0 收藏0

發(fā)表評論

0條評論

MingjunYang

男|高級講師

TA的文章

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