您好,登錄后才能下訂單哦!
今天小編給大家分享一下vue組件間的通信,子組件向父組件傳值的方式是什么的相關(guān)知識點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識,所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來了解一下吧。
父組件里面的子組件通過@func綁定一個函數(shù)來處理
子組件傳過來的數(shù)據(jù)
<template> <div class="app"> <input @click="sendMsg" type="button" value="給父組件傳遞值"> </div> </template> <script> export default { data () { return { //將msg傳遞給父組件 msg: "我是子組件的msg", } }, methods:{ sendMsg(){ //func: 是父組件指定的傳數(shù)據(jù)綁定的函數(shù),this.msg:子組件給父組件傳遞的數(shù)據(jù) 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就是把數(shù)據(jù)放到內(nèi)存里面去,各個組件間都可以共享vuex里面的數(shù)據(jù)
1.在一個組件間調(diào)用this.$store.dispatch(‘findUserInfoList’, q_userInfo_form); 來觸發(fā)vuex里面函數(shù)修改vuex的數(shù)據(jù),然后在另一個組件用計算屬性映射獲取vuex的這個屬性值,就可以實現(xiàn)組件間的數(shù)據(jù)傳遞
computed: mapState({ //映射vuex的相關(guān)屬性值 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對象的$on和$emit事件,在同一個vue的實例可以觸發(fā)這兩個事件,比如子組件傳遞數(shù)據(jù)到父組件,在子組件通過同一個vue對象觸發(fā)$emit事件傳遞數(shù)據(jù),在父組件通過vue實例的$on監(jiān)聽剛剛emit觸發(fā)的事件來獲取子組件傳遞過來的數(shù)據(jù)
先創(chuàng)建一個constantsBus.js文件,里面根據(jù)不同模塊創(chuàng)建相關(guān)的vue實例
/** * 不同組件間通訊用的 中央事件總線 */ import Vue from 'vue'; //用戶管理總線 export const userBus = new Vue(); //管理員管理總線 export const adminBus = new Vue();
在一個組件間調(diào)用$emit傳遞數(shù)據(jù)
//引用剛剛創(chuàng)建的constantsBus.js import * as constantsBus from '@/common/constantsBus';
在另個接收數(shù)據(jù)的組件用$on來監(jiān)聽獲取emit傳過來的數(shù)據(jù)
created() { let that = this; //監(jiān)聽子組件的事件,獲取其他組件傳遞過來的data數(shù)據(jù) constantsBus.processBus.$on('processChooseAssessor', data => { //獲取emit觸發(fā)的processChooseAssessor事件傳遞過來的data數(shù)據(jù) }); },
一般來說在vue的數(shù)據(jù)傳遞是在父組件傳子組件通過屬性來傳,但是通過屬性來傳值,是單向的,子組件不能修改父組件的prop值,如果在子組件里面修改父組件傳過來的prop屬性值,會報錯,但是也有例外,對象類型的除外,如果父組件傳給子組件的屬性是對象的話,是可以修改對象里面的值的,并且修改后也對父組件可見,因為對象的話最后的引用都是指向同一塊內(nèi)存,不受子組件不可以修改父組件的屬性約束。(不過不建議這樣處理,子組件可以修改父組件的屬性會污染數(shù)據(jù)傳遞,可能以后在那個子組件改了都不知道,一般對象的傳遞要深拷貝)
調(diào)用子組件的方法獲取子組件的數(shù)據(jù)
1.在子組件寫一個獲取數(shù)據(jù)的方法
2.父組件通過子組件的ref調(diào)用這個方法獲取子組件的數(shù)據(jù)
<trademark-file-upload ref="trademarkFileUpload" :uploadFileList="uploadFileList"></trademark-file-upload> <script> let fileList = this.$refs.trademarkFileUpload.getFileList(); <script>
以上就是“vue組件間的通信,子組件向父組件傳值的方式是什么”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家閱讀完這篇文章都有很大的收獲,小編每天都會為大家更新不同的知識,如果還想學(xué)習(xí)更多的知識,請關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。