目录标题
一,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