vue 九种组件传值方式汇总

一，props和$emit(父子组件)

1，父组件向子组件传递数据是通过prop传递的：

补充： props定义方式不同以及相关用法(类型检查，默认值)
props直接用数组接收所有参数

props: ["numC",'msgC']

props定义接收类型，做类型检查，传值类型不对会报错

props: {
	        numC: { type: Number, },
	        msgC: { type: String, }
       },

props定义还可以定义多种接收类型，并定义默认值，当父组件未传值的时候，显示默认值

props: {
		    numC: {
		       type:[String,Number,Boolean],
		       default: 200
		    },
		    msgC:{
		       type:[String,Number,Array],
		       default:"默认值"
		    }
    },

注意： props已经有的参数 不可在data中再次定义。

2，子组件传递数据给父组件是通过$emit触发事件来做到的

二，$ parent和$ children（非常简洁）

子组件传值给父组件， 通过$parent传值：

父组件传值给子组件， 通过 $ children进行传值
注意： $children[index] 要加下标，不然不能知道是哪一个子组件，即使父组件只是引用了一个子组件：

三，ref（获取子组件所有属性，事件等）

如果 ref 作用到 html 标签 ,则指向当前的dom 元素
如果 ref 作用到 组件 上 , 则指向当前的组件对象

四，v-model （特殊情景使用，一般不使用）

父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit(‘input’,val)自动修改v-model绑定的值

五，$ attrs和$ listeners（跨级通信）

$ attrs 孙或子或更低的辈分组件获取父辈组件的值：
下面的列子Child组件中的props相当于截取了父辈传出的a，那么在孙组件/child2组件就不会在有a的值了，只有b和c。注意：v-bind="$attrs"只能这么写

$ listeners 孙或子或更低的辈分组件获取父辈组件的方法：

同时通过 $listeners 作为中间媒介，再通过 $emit 进行孙组件向父辈组件传值

六、provide和inject （成对出现，用于父向下传递数据）

1、这两属性需要一起使用，允许一个祖先组件向其子子孙孙注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
2、主要解决了跨级组件间的通信问题，不过它的使用场景主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。
3、用法很简单只需要再父组件的provide属性里面写入需要传出的值，在子组件直接用inject传入组件的值即可

注意：provide 和 inject 绑定并不是可响应的，就是当你改变父组件的值时，子组件的值并不会改变，这是刻意为之的。但是如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

通过直接提供 祖先组件的实例来进行数据可响应

七、中央事件总线（兄弟组件通信）

实现兄弟组件之间的数据传递
把bus定义在vue的prototype上，在全局都可以使用
main.js 中挂载实例
const bus = new Vue()
Vue.prototype.$bus = bus

const bus = new Vue()
Vue.prototype.$bus = bus

this.$ bus.$ emit发送事件
this.$ bus.$ on接收事件

注意：要先触发b u s . bus.bus.emit对应的事件，然后通过b u s . bus.bus.on监听事件，才会有数据，仅仅只是监听是没数据的。

注意：注册的总线事件要在组件销毁时卸载，否则会多次挂载，造成触发一次但多个响应的情况

beforeDestroy () {
   this.bus.$off('bus', this.getData);
}

另： 安装网址 https://www.npmjs.com/package/vue-bus

八、v-slot（插槽传值，灵活运用）

点击去v-slot文章查看

九、vuex （集中的数据处理方式)

点击去vuex文章查看