溫馨提示×

vue組件通信方式有哪些

養魚的貓咪
234
2021-03-29 14:47:38
欄目: 編程語言

vue中實現組件通信的方式有:1.通過props傳遞實現組件通信;2.使用ref設置父子組件實現組件通信;3.使用parent創建兄弟組件通信僑聯實現組件通信;4.使用provide與inject定義祖后代組件實現組件通信;

vue組件通信方式有哪些

vue中實現組件通信的方式有以下幾種

1.通過props傳遞實現組件通信

props:{

    // 字符串形式

    name:String // 接收的類型參數

    // 對象形式

    age:{  

        type:Number, // 接收的類型為數值

        defaule:18,  // 默認值為18

        require:true // age屬性必須傳遞

          }

}

2.使用ref設置父子組件實現組件通信

<Children ref="foo" />

 

this.$refs.foo  // 獲取子組件

3.使用parent創建兄弟組件的通信僑聯實現組件通信

this.$parent.on('add',this.add)

this.$parent.emit('add')

4.使用provide與inject定義祖后代組件實現組件通信

1)祖先組件通過provide設置傳值

provide(){

    return {

        foo:'foo'

    }

}

2)后代組件通過inject接收祖先組件傳值

inject:['foo']



0
亚洲午夜精品一区二区_中文无码日韩欧免_久久香蕉精品视频_欧美主播一区二区三区美女