今天小编给大家分享一下vue组件间的通信,子组件向父组件传值的方式是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。
一、子组件通过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里面的数据
在一个组件间调用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对象的$on和$emit事件，在同一个vue的实例可以触发这两个事件，比如子组件传递数据到父组件，在子组件通过同一个vue对象触发$emit事件传递数据，在父组件通过vue实例的$on监听刚刚emit触发的事件来获取子组件传递过来的数据
先创建一个constantsBus.js文件，里面根据不同模块创建相关的vue实例
import Vue from 'vue';//用户管理总线export const userBus = new Vue();//管理员管理总线export const adminBus = new Vue();在一个组件间调用$emit传递数据
//引用刚刚创建的constantsBus.jsimport * as constantsBus from '@/common/constantsBus';
在另个接收数据的组件用$on来监听获取emit传过来的数据
created() { let that = this; //监听子组件的事件,获取其他组件传递过来的data数据 constantsBus.processBus.$on('processChooseAssessor', data => { //获取emit触发的processChooseAssessor事件传递过来的data数据 });},四、通过修改父组件传过来的对象属性
一般来说在vue的数据传递是在父组件传子组件通过属性来传,但是通过属性来传值，是单向的，子组件不能修改父组件的prop值，如果在子组件里面修改父组件传过来的prop属性值，会报错，但是也有例外，对象类型的除外，如果父组件传给子组件的属性是对象的话，是可以修改对象里面的值的，并且修改后也对父组件可见，因为对象的话最后的引用都是指向同一块内存，不受子组件不可以修改父组件的属性约束。（不过不建议这样处理，子组件可以修改父组件的属性会污染数据传递，可能以后在那个子组件改了都不知道，一般对象的传递要深拷贝）
五、父组件使用子组件的引用ref
调用子组件的方法获取子组件的数据
在子组件写一个获取数据的方法
父组件通过子组件的ref调用这个方法获取子组件的数据
<trademark-file-upload ref="trademarkFileUpload" :uploadFileList="uploadFileList"></trademark-file-upload><script>let fileList = this.$refs.trademarkFileUpload.getFileList();<script>以上就是“vue组件间的通信,子组件向父组件传值的方式是什么”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注编程网行业资讯频道。
