Vue元件傳值回顧

2021-10-02 18:53:40 字數 1624 閱讀 9858

1. 兄弟元件之間傳值

實現步驟：

定義模組 src/bus.js ,內容是匯入 vue模組並且匯出vue實列物件

import  vue from


'vue'


// 匯入vue模組


export


default


newvue()


// 匯出vue實列物件
2.在兄弟元件之間都匯入bus.js模組

雖然兄弟之間都匯入了bus模組，但是在系統中bus模組還是只有乙份的

import  bus from


'@/bus.js'


// 匯入 bus模組  前面加@是表示絕對路徑
接收資料的元件，在改組件的created 生命週期方法裡用 bus.$on(『事件名稱』,(接收的資料) =>{}) 定義事件成員方法，用於獲取接收資料

created()


)}
傳送資料的兄弟元件中，使用bus.$emit(『事件名稱』，要傳送的資料)來向外傳送資料

"sendmsg"


>給兄弟說話<


/button>


export


default


}}
2. 子元件給父元件傳值

父給子元件傳值：

父元件要在子元件標籤上通過屬性值方式傳值：

《子元件標籤 name=value name=value name=value>


<


/子元件標籤》
子元件接收並應用父級元件傳遞過來的資料，具體通過props接收

// 在模板中應用傳遞過來的資料


""export


default}}


<


/script>
子元件給父元件傳值

父元件操作語法：

父元件通過 @符號向子元件傳遞乙個事件方法

《子元件 @func1=


"show"


>


<


/子元件》


...methods:


// func1 為事件的名稱，給子元件觸發使用


// show為改事件的執行函式，在父元件的methods內定義好


//  在事件中可以通過形參  (arg1, arg2) 接收子元件傳遞過來的資料並且做下一步處理


}
字元件操作：

字元件中，使用this.$emit()呼叫 父元件的方法

this


.$emit


('func1'


,資料，資料)


this


: 當前子元件物件


$emit:通過這個關鍵字可以使得子元件可以呼叫 父元件 的事件
從第二個位置開始傳遞實參資料，其可以被父元件methods方法的形參所接受

$emit(名稱，資料，資料……) 是元件呼叫自己方法的固定方式，第乙個引數是被呼叫方法的名稱，後續引數都是給方法傳遞的實參資訊

Vue元件傳值 父子元件傳值

父元件可以引入 使用子元件，從業務上看，該父元件有可能對子元件有個性化需求，為了體現元件的靈活多變，可以通過傳值實現。應用情景 語法 父元件要在子元件標籤上通過屬性值方式傳值 子元件標籤 name value name value name value 子元件標籤 子元件接收並應用值，具體通過pro...

vue 元件傳值 父子元件傳值，兄弟元件傳值

父向子 v bind props 子元件 子元件 props msg props接收 props 驗證 props food接受數值型別的引數，如果不傳入的話預設就是100 food fooe接受物件型別的引數 fooe foof使用乙個自定義的驗證器 foof foog props 是單向繫結的 ...

Vue元件傳值

學習vue的傳值心得，剛入門vue，大佬勿噴，請多多指教。1.父元件傳值子元件 父元件巢狀子元件式，在標籤裡繫結 子元件用props屬性接收 例 父元件傳值，為縮寫，等同於v bind obj item props obj count 子元件接收傳值，可直接使用，但是推薦在下方重新賦值給新變數再使用...