vue 组件间的通信之子组件向父组件传值的方式
(编辑：jimmy 日期: 2024/11/15 浏览：2)
父组件向子组件传值：父组件通过属性向下传值的方式和子组件通信；
使用步骤：
定义组件：现有自定义组件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) "color: #ff0000">三、通过中央总线来传递组件间的数据
对于一些简单的项目里的可能又不是父子组件，可能是同级组件的，另一方面又没有必要使用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>