vue元件傳值有哪五種方法

vue元件傳值的五種方法：1、父元件向子元件進行傳值；2、子元件傳送值給父元件；3、相鄰兄弟元件間進行傳參；4、遠兄弟組件間進行傳參；5、EventBus傳參。

本教學操作環境：windows7系統、vue2.9.6版，DELL G3電腦。

Vue的通訊方式，也可以說是傳參方式：

• 父元件傳送值給子元件：

• 子元件傳送值給父元件：

• 相鄰兄弟元件間進行傳參（親兄弟）

• 遠兄弟傳參（表兄弟）

  
  

EventBus傳參

一、父子傳參

原理：父控制子，透過子元件的props屬性，拋出子元件自訂標籤屬性，來接收父元件的操作狀態

範例：父級裡的一個按鈕，控制子元件裡的一個p的顯示隱藏

    
    





    
    

        父按钮
        

        
        
    

    

    
    

效果：

二、子父傳參

原則：子控制父，子元件綁定自訂事件，來處理父元件的方法函數，透過.$emit('自訂事件',[參數])來觸發屬於自己的自訂事件

範例：子元件裡一個按鈕，控制父元件裡的一個p的顯示隱藏

效果：

三、相鄰兄弟傳參（親兄弟）

原理：透過一個公有的父元素作為橋接（實例元件），結合父子props 傳參、子父自訂事件

範例：c1、c2是兄弟關係c1可用控制c2裡元素的顯示隱藏

父级状态
{{state}}

效果：

四、遠兄弟傳參（表兄弟）

原則：透過建立一個中間實例，註冊一個事件，在被控組件中，透過事件攜帶要執行的函數，在主控制元件中，透過事件，改變對應的動作

#

效果：

#點擊前：

點選後：

#五、EventBus傳參

1.在main.js種掛載全域EventBus

Vue.prototype.$EventBus = new Vue()

2.A元件

3.B元件

透過掛載全域Vue物件傳遞參數。

相關推薦：《###vue.js教學###》###

以上是vue元件傳值有哪五種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！