vue-组件传参（父子，兄弟，组件跨级）

一、父子组件之间的传参

1.父传子：

父组件向子组件传入一个参数 注意：父组件传入到子组件中的数据不允许子组件修改：单向数据流 如果需要能修改的话，那么那个数据应该是复杂数据类型，例如Data、function、Array，object等 复杂数据类型：复杂数据类型在栈中存储数据名和一个堆的地址，在堆中存储属性及值。访问时先从栈获取地址，再到堆中拿出相应的值。 修改：直接将栈空间的内容进行修改 修改是：栈空间中的内容不会修改，改的是堆空间内容

-父传： 在父组件中：通过给子组件添加自定义属性：来传递参数

//html
<son :passvalue="aMsg" />

-子接： 在子组件中：通过 props 属性来进行接收

export default {
          
   
	props: [passvalue] //passvalue是父组件传递给子组件的参数
}

子组件接收到参数之后的用法跟 data 中数据的用法是一样的，使用this来获取

let value = this.passvalue

2.子传父

子组件向父组件传入一个参数 -子传：通过一个自定义事件向父组件传递参数：

//在子组件中的methods中写
methods:{
          
   
	this.$emit(passtofather, this.sonMsg)
}

-父接 通过实现这个自定义事件来接收参数

// html
<son @passtofather="myfn" /> 
// 在父组件中接收参数时，如果代码写在 html 行内，要获取传入的数据可以通过 $event

// js
export default {
          
   
	methods: {
          
   
		myfn(value) {
          
   
			// value 就是子组件传入的参数
		}
	}
}

二、兄弟组件之间传参：eventBus插件

使用步骤：

1. 下载插件：

npm i eventbus

2. 创建一个公用的bus,哪里用到就导入

//1.创建一个bus.js文件
// 导入vue 
import Vue from vue;
// 导出bus  
export default new Vue();
//（没错，这个文件就两行代码）


//2.使用：
//在login.vue组件中使用到bus，就在vue中导入bus文件
//导入 bus.js
<script>
import bus from 文件路径/bus.js
export default {
          
   
	methods:{
          
   
		openreply(){
          
    //在这里随意写一个方法
	        // 通过eventbus 向(兄弟组件)中传入数据源 （值）
	        bus.$emit(passitem, this.commentItem)
      }
	}
</script>



//在home.vue组件（兄弟）接收login.vue兄弟传过来的值
<script>
//导入bus.js
import bus from 文件路径/bus.js
export default {
          
   
	created() {
          
   
    //  $on 接收comment兄弟组件传的参数
    bus.$on("passitem", value => {
          
   
      this.commentItem = value; //value就是comment组件传过来的commentItem
    });
  },
}
</script>

三、组件跨级传参：$attrs和$listeners

如果A需要传递给C ，该如何传参？ 1.当然你可以使用VueX来进行数据管理，但是如果项目中多个组件共享状态比较少，项目比较小，并且全局状态比较少,使用vuex就没有发挥出VueX的威力了。 2.使用B来做中转站，也是可以的，但是组件如果嵌套更多，这种方法就会导致代码繁琐，不容易维护 3.使用$attrs和$listeners，这是vue2.4版本出来的方法 （本人没有具体使用过这个传参方式，若有哪位大佬使用过，非常欢迎来指点一下，技术问题可尽情来骚扰！！）

组件传参还有其他种方式

组件之间的传参方式：

props / $emit eventbus vuex $attrs / $listeners ref / $parent