Vue — 元件通訊

萬事順意發表於2024-03-11
Vue元件

一、父傳子

　　<!-- 1.父元件：給子元件用新增屬性的方式來傳值 -->
    <Son :msg="msg" :arr="arr"></Son>

　　// 2.子元件：子元件透過props來接收
    props : ['msg','arr']

關於prop

1.什麼是prop

（1）定義：元件上定義的一些自定義屬性

（2）作用：向子元件傳遞資料

（3）特點：可以傳任意數量、任意型別的prop

2.prop校驗：元件的prop（資料型別）不能亂傳，添加prop的校驗要求

（1）型別校驗 //String Boolean Number Object ...

（2）非空校驗、預設值、自定義校驗

    props: {
        msg: Number,
        arr: {
            type: Array, //資料型別校驗
            requied: true,//非空校驗
            default: function () {
                return [1,3,5];
            },//預設值
            validator(value){

                console.log(value)
                if(value[0]==1){

                    return true
                }else{
                    return false
                }

            }//自定義校驗
        }
    },

3.prop&data、單項資料流

（1）共同點：給元件提供資料

（2）區別：

data的資料都是自己的，可以隨便修改；

prop的資料是父元件傳過來的，不能直接改，要遵循單向資料流(父元件的prop更新會單向的向下流動，影響子元件)

二、子傳父

//子元件：子元件透過$emit 向父元件傳送訊息通知
<button @click="sendFather">傳給父元件</button>
methods:{
        sendFather(){
            this.$emit('sonMsg',this.sonMsg)
        }
}
//父元件：在子元件標籤新增訊息監聽 並在函式中處理
<Son @sonMsg="accept"></Son>
methods : {
    accept(params){
      console.log(params)
    }
  }

三、非父子關係(兄弟元件)（EventBus）

//1.建立一個都能訪問到的事件匯流排 （空的Vue例項）
import Vue from 'vue'
const Bus= new Vue()
export default Bus
//B元件傳送
<button @click="send">send</button>

import Bus from '../utils/EventBus'
 methods : {
        send(){
            Bus.$emit('sendMsg','11111111188888888888888888')
        }
 }

//A元件接收
import Bus from '../utils/EventBus'
created() {
        // 2.在接收方進行監聽Bus的事件（訂閱訊息）
        Bus.$on('sendMsg', (msg) => {
            console.log(msg)
            this.msg = msg
        })
},

//ps:可以有多個接收方

四、非父子元件(跨層級元件) （provide&inject）

祖先元件透過 provide 提供資料，後代元件透過 inject 注入資料，實現祖先元件向後代元件傳遞資料

//APP元件
 data() {
    return {
      obj: {
        name: '晴天',
        age: '1',

      }, //響應式
      color: 'pink' //非響應式
    }

  },
  provide() {
    return {
      color: this.color ,
      obj : this.obj
    }
  }

//子元件
inject:['obj']

//孫子元件
inject:['color']

　

相關文章