一、父传子——利用props配置项
-
功能:让组件接收外部传过来的数据
-
传递数据:
<label :age="18"/>
-
接收数据:
-
第一种方式(只接收):
props:['age']
-
第二种方式(限制类型):
props:{age:Number}
-
第三种方式(限制类型、限制必要性、指定默认值):
props:{ age:{ type:Number, //类型 required:true, //必要性 default:18 //默认值 } }
注意:props是只读的,Vue底层会监测props的修改,如果进行了修改,就会发出警告,若确实需要修改,那么可将props的内容到data中一份,然后再去修改data中的数据。
-
二、子传父(两种方法)
当父组件将数据传给子组件时,子组件通过props接受,此时数据来源自父组件,若子组件想对接收到的数据进行修改时,vue中不建议在子组件中对这些数据进行修改,这些任务应该交给父组件自己完成,此时修改数据可使用两种方法
1.父组件定义操作数据的函数,然后将该函数传给子组件,子组件通过props属性接收后,调用该函数并传参,修改数据的操作部分仍放在父组件中(该方法一般不用)
父组件
<template>
<div>
{{number}}
<child :changenum="changenum"/>
</div>
</template>
export default {
name: 'parent',
data() {
return {
number: 1,
}
},
methods: {
changenum(num) {
this.number = this.number + num
}
}
}
子组件
<template>
<div>
<button @click="add">点我加1</button>
</div>
</template>
export default {
name: 'child',
props: ['changenum'],
methods: {
add() {
this.changenum(1)
}
}
}
2.组件的自定义事件
-
一种组件间通信的方式,适用于:子组件 => 父组件,A是父组件,B是子组件,B想给A传数据,那么就要在A中给B绑定自定义事件,事件的回调在A中。
-
绑定自定义事件:
-
第一种方式,在父组件中:
<Child @owndefine="test"/>
-
第二种方式,在父组件中:
<Child ref="xxx"/> ...... mounted(){ this.$refs.xxx.$on('owndefine',this.test) }
-
若想让自定义事件只能触发一次,可以使用
once
修饰符,或$once
方法。
-
-
触发自定义事件:
this.$emit('owndefine',数据)
-
解绑自定义事件
this.$off('owndefine')
-
组件上也可以绑定原生DOM事件,需要使用
native
修饰符。 -
注意:通过
this.$refs.xxx.$on('owndefine',回调)
绑定自定义事件时,回调要么配置在methods中,要么用箭头函数,否则this指向会出问题!
三、任意组件之间通信
-
全局事件总线
-
安装全局事件总线:
new Vue({ ...... beforeCreate() { Vue.prototype.$bus = this //安装全局事件总线,$bus就是当前应用的实例对象 }, ...... })
-
使用事件总线:
接收数据:A组件想接收数据,则在A组件中给$bus绑定自定义事件,事件的回调留在A组件自身。
methods(){ demo(data){......} } ...... mounted() { this.$bus.$on('xxxx',this.demo) }
提供数据:
this.$bus.$emit('xxxx',数据)
最后最好在beforeDestroy钩子中,用$off去解绑当前组件所用到的事件。
beforeDestroy() { this.$bus.$off('xxx') }