91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

vue2.0父子組件及非父子組件之間的通信方法

發布時間:2020-09-08 17:23:54 來源:腳本之家 閱讀:163 作者:mr_fzz 欄目:web開發

1.父組件傳遞數據給子組件

父組件數據如何傳遞給子組件呢?可以通過props屬性來實現

父組件:

<parent>
  <child :child-msg="msg"></child>//這里必須要用 - 代替駝峰
</parent>
data(){
  return {
    msg: [1,2,3]
  };
}

子組件通過props來接收數據:

方式1:

props: ['childMsg']

方式2 :

props: {
  childMsg: Array //這樣可以指定傳入的類型,如果類型不對,會警告
}

方式3:

props: {
  childMsg: {
    type: Array,
    default: [0,0,0] //這樣可以指定默認的值
  }
}

這樣呢,就實現了父組件向子組件傳遞數據.

2.子組件與父組件通信

那么,如果子組件想要改變數據呢?這在vue中是不允許的,因為vue只允許單向數據傳遞,這時候我們可以通過觸發事件來通知父組件改變數據,從而達到改變子組件數據的目的.

子組件:

<template>
  <div @click="up"></div>
</template>
methods: {
  up() {
    this.$emit('upup','hehe'); //主動觸發upup方法,'hehe'為向父組件傳遞的數據
  }
}

父組件:

<div>
  <child @upup="change" :msg="msg"></child> //監聽子組件觸發的upup事件,然后調用change方法
</div>
methods: {
  change(msg) {
    this.msg = msg;
  }
}

3.非父子組件通信

如果2個組件不是父子組件那么如何通信呢?這時可以通過eventHub來實現通信.
所謂eventHub就是創建一個事件中心,相當于中轉站,可以用它來傳遞事件和接收事件.

let Hub = new Vue(); //創建事件中心

組件1觸發:

<div @click="eve"></div>
methods: {
  eve() {
    Hub.$emit('change','hehe'); //Hub觸發事件
  }
}

組件2接收:

<div></div>
created() {
  Hub.$on('change', () => { //Hub接收事件
    this.msg = 'hehe';
  });
}

這樣就實現了非父子組件之間的通信了.原理就是把Hub當作一個中轉站!

以上所述是小編給大家介紹的vue2.0父子組件及非父子組件之間的通信方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

溧水县| 尉犁县| 迁西县| 铜陵市| 乌兰浩特市| 恭城| 西宁市| 桑日县| 衢州市| 洪洞县| 四会市| 电白县| 焉耆| 北京市| 黄平县| 平谷区| 吉安市| 玉林市| 大姚县| 晋城| 承德县| 中牟县| 保靖县| 金川县| 察隅县| 牟定县| 大冶市| 唐河县| 长宁区| 阿尔山市| 新和县| 彭阳县| 阳新县| 锦州市| 汉源县| 石台县| 怀安县| 大余县| 阿坝县| 苏尼特左旗| 青海省|