vue 元件間的通訊之子元件向父元件傳值的方式
父元件向子元件傳值：父元件通過屬性向下傳值的方式和子元件通訊；
使用步驟：
定義元件：現有自定義元件com-a、com-b，com-a是com-b的父元件；
準備獲取資料：com-b要獲取父元件data中的name屬性；
在<com-b :name=“name”></com-b> 使用v-bind 繫結name屬性，紅色部分為屬性名稱，可以隨意寫。
在子元件定義部分裡新增選項，值是個字串陣列 props:[‘name']，將上邊紅色的屬性名稱寫在這裡；
之後就可定義在子元件中使用name屬性了；
好了，接著本文的重點內容。
寫vue，如果頁面涉及到多個元件，就會涉及元件之間的通訊，可能是父子元件間的通訊，也可以是同級元件間的通訊，那麼，vue裡面的元件如何通訊。一般來說在vue的資料傳遞是在父元件傳子元件通過屬性來傳，子元件傳父元件通過事件來傳值。
1. 子元件通過通過this.$emit()的方式將值傳遞給父元件；
2. 通過vuex來傳遞元件間的資料；
3. 通過中央匯流排來傳遞元件間的資料；
4. 通過修改父元件傳過來的物件屬性
5. 父元件使用子元件的引用ref呼叫子元件的方法獲取子元件的資料
一、子元件通過this.$emit()的方式將值傳遞給父元件，父元件裡面的子元件通過@func繫結一個函式來處理
子元件傳過來的資料
<template>
<div class="app">
<input @click="sendMsg" type="button" value="給父元件傳遞值">
</div>
</template>
<script>
export default {
data () {
return {
//將msg傳遞給父元件
msg: "我是子元件的msg",}
},methods:{
sendMsg(){
//func: 是父元件指定的傳資料繫結的函式，this.msg:子元件給父元件傳遞的資料
this.$emit('func',this.msg)
}
}
}
</script>父元件
<template>
<div class="app">
<child @func="getMsgFormSon"></child>
</div>
</template>
<script>
import child from './child.vue'
export default {
data () {
return {
msgFormSon: "this is msg"
}
},components:{
child,},methods:{
getMsgFormSon(data){
this.msgFormSon = data
console.log(this.msgFormSon)
}
}
}
</script>二、通過vuex來傳遞元件間的資料
vuex就是把資料放到記憶體裡面去，各個元件間都可以共享vuex裡面的資料
1.在一個元件間呼叫this.$store.dispatch(‘findUserInfoList',q_userInfo_form); 來觸發vuex裡面函式修改vuex的資料，然後在另一個元件用計算屬性對映獲取vuex的這個屬性值，就可以實現元件間的資料傳遞
computed: mapState({
//對映vuex的相關屬性值
userInfoList: state => state.userInfoModule.userInfoList,start: state => state.userInfoModule.start,total: state => state.userInfoModule.total,}),method:{
//查詢操作
findUserInfoList: function(q_userInfoForm,start){
this.q_userInfoForm.start = (start === null) ? 1 : start;
this.$store.dispatch('findUserInfoList',q_userInfo_form);
},}
三、通過中央匯流排來傳遞元件間的資料
對於一些簡單的專案裡的可能又不是父子元件，可能是同級元件的，另一方面又沒有必要使用Vuex，針對這種情形可以使用中央事件匯流排（Event Bus）來解決問題，主要用到vue物件的
先建立一個constantsBus.js檔案，裡面根據不同模組建立相關的vue例項
/** * 不同元件間通訊用的 中央事件匯流排 */ import Vue from 'vue'; //使用者管理匯流排 export const userBus = new Vue(); //管理員管理匯流排 export const adminBus = new Vue();
在一個元件間呼叫$emit傳遞資料
//引用剛剛建立的constantsBus.js import * as constantsBus from '@/common/constantsBus';
4. 在另個接收資料的元件用$on來監聽獲取emit傳過來的資料
created() {
let that = this;
//監聽子元件的事件,獲取其他元件傳遞過來的data資料
constantsBus.processBus.$on('processChooseAssessor',data => {
//獲取emit觸發的processChooseAssessor事件傳遞過來的data資料
});
},
四、通過修改父元件傳過來的物件屬性
一般來說在vue的資料傳遞是在父元件傳子元件通過屬性來傳,但是通過屬性來傳值，是單向的，子元件不能修改父元件的prop值，如果在子元件裡面修改父元件傳過來的prop屬性值，會報錯，但是也有例外，物件型別的除外，如果父元件傳給子元件的屬性是物件的話，是可以修改物件裡面的值的，並且修改後也對父元件可見，因為物件的話最後的引用都是指向同一塊記憶體，不受子元件不可以修改父元件的屬性約束。（不過不建議這樣處理，子元件可以修改父元件的屬性會汙染資料傳遞，可能以後在那個子元件改了都不知道，一般物件的傳遞要深拷貝）
五、父元件使用子元件的引用ref呼叫子元件的方法獲取子元件的資料
1.在子元件寫一個獲取資料的方法
2.父元件通過子元件的ref呼叫這個方法獲取子元件的資料
<trademark-file-upload ref="trademarkFileUpload" :uploadFileList="uploadFileList"></trademark-file-upload> <script> let fileList = this.$refs.trademarkFileUpload.getFileList(); <script>
到此這篇關於vue 元件間的通訊之子元件向父元件傳值的方式的文章就介紹到這了,更多相關vue 子元件向父元件傳值內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！