父組件向子組件傳值：父組件通過屬性向下傳值的方式和子組件通信；

使用步驟：

定義組件：現(xiàn)有自定義組件com-a、com-b，com-a是com-b的父組件；

準(zhǔn)備獲取數(shù)據(jù)：com-b要獲取父組件data中的name屬性；

在<com-b :name=“name”></com-b> 使用v-bind 綁定name屬性，紅色部分為屬性名稱，可以隨意寫。

在子組件定義部分里添加選項(xiàng)，值是個(gè)字符串?dāng)?shù)組 props:[‘name’]，將上邊紅色的屬性名稱寫在這里；

之后就可定義在子組件中使用name屬性了；

好了，接著本文的重點(diǎn)內(nèi)容。

寫vue，如果頁面涉及到多個(gè)組件，就會(huì)涉及組件之間的通信，可能是父子組件間的通信，也可以是同級組件間的通信，那么，vue里面的組件如何通信。一般來說在vue的數(shù)據(jù)傳遞是在父組件傳子組件通過屬性來傳，子組件傳父組件通過事件來傳值。

1. 子組件通過通過this.$emit()的方式將值傳遞給父組件；2. 通過vuex來傳遞組件間的數(shù)據(jù)；3. 通過中央總線來傳遞組件間的數(shù)據(jù)；4. 通過修改父組件傳過來的對象屬性5. 父組件使用子組件的引用ref調(diào)用子組件的方法獲取子組件的數(shù)據(jù)

一、子組件通過this.$emit()的方式將值傳遞給父組件，父組件里面的子組件通過@func綁定一個(gè)函數(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 = dataconsole.log(this.msgFormSon) } }}</script>

二、通過vuex來傳遞組件間的數(shù)據(jù)

vuex就是把數(shù)據(jù)放到內(nèi)存里面去，各個(gè)組件間都可以共享vuex里面的數(shù)據(jù)

1.在一個(gè)組件間調(diào)用this.$store.dispatch(‘findUserInfoList’, q_userInfo_form); 來觸發(fā)vuex里面函數(shù)修改vuex的數(shù)據(jù)，然后在另一個(gè)組件用計(jì)算屬性映射獲取vuex的這個(gè)屬性值，就可以實(shí)現(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); },}

三、通過中央總線來傳遞組件間的數(shù)據(jù)

對于一些簡單的項(xiàng)目里的可能又不是父子組件，可能是同級組件的，另一方面又沒有必要使用Vuex，針對這種情形可以使用中央事件總線（Event Bus）來解決問題，主要用到vue對象的on和on和on和emit事件，在同一個(gè)vue的實(shí)例可以觸發(fā)這兩個(gè)事件，比如子組件傳遞數(shù)據(jù)到父組件，在子組件通過同一個(gè)vue對象觸發(fā)emit事件傳遞數(shù)據(jù)，在父組件通過vue實(shí)例的emit事件傳遞數(shù)據(jù)，在父組件通過vue實(shí)例的emit事件傳遞數(shù)據(jù)，在父組件通過vue實(shí)例的on監(jiān)聽剛剛emit觸發(fā)的事件來獲取子組件傳遞過來的數(shù)據(jù)

先創(chuàng)建一個(gè)constantsBus.js文件，里面根據(jù)不同模塊創(chuàng)建相關(guān)的vue實(shí)例

/** * 不同組件間通訊用的 中央事件總線 */import Vue from ’vue’;//用戶管理總線export const userBus = new Vue();//管理員管理總線export const adminBus = new Vue();

在一個(gè)組件間調(diào)用$emit傳遞數(shù)據(jù)

//引用剛剛創(chuàng)建的constantsBus.jsimport * as constantsBus from ’@/common/constantsBus’;

4. 在另個(gè)接收數(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屬性值，會(huì)報(bào)錯(cuò)，但是也有例外，對象類型的除外，如果父組件傳給子組件的屬性是對象的話，是可以修改對象里面的值的，并且修改后也對父組件可見，因?yàn)閷ο蟮脑捵詈蟮囊枚际侵赶蛲粔K內(nèi)存，不受子組件不可以修改父組件的屬性約束。（不過不建議這樣處理，子組件可以修改父組件的屬性會(huì)污染數(shù)據(jù)傳遞，可能以后在那個(gè)子組件改了都不知道，一般對象的傳遞要深拷貝）

五、父組件使用子組件的引用ref調(diào)用子組件的方法獲取子組件的數(shù)據(jù)

1.在子組件寫一個(gè)獲取數(shù)據(jù)的方法

2.父組件通過子組件的ref調(diào)用這個(gè)方法獲取子組件的數(shù)據(jù)

<trademark-file-upload ref='trademarkFileUpload' :uploadFileList='uploadFileList'></trademark-file-upload><script>let fileList = this.$refs.trademarkFileUpload.getFileList();<script>

到此這篇關(guān)于vue 組件間的通信之子組件向父組件傳值的方式的文章就介紹到這了,更多相關(guān)vue 子組件向父組件傳值內(nèi)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！