1.函数类型（子传父）
父亲：
<template>
<div class="div">
//通过父组建给子组建传递函数类型的props实现：子给父传递数据
<Child :getChildInfo="getChildInfo" />
</div>
</template>
<script>
import Child from '../courseManage/courseStudent/child'
export default {
name: '组建的名字',
components: {
Child
},
methods: {
getChildInfo(name) {
console.log(name, '从子组建传递过来的名字')
}
}
}
</script>
-------------------------------------------------------------------------------
儿子：Child
<template>
<div class="div">
<button @click="sendFather">发送</button>
</div>
</template>
<script>
export default {
name: 'child',
props: ['getChildInfo'],//从父组建传递过来的函数
data() {
return {
name: '今天星期五'
}
},
methods: {
sendFather() {
this.getChildInfo(this.name)//点击发送的时候直接调用
}
}
}
</script>
2.自定义事件（子传父）
<template>
<div class="div">
<!-- v-on在Student组建身上，就是给Student组建身上的实力对象vc绑定了一个事件叫demo -->
<!-- v-on||@-->
<Student v-on:hello="demo" />
</div>
</template>
<script>
import Student from '../courseManage/courseStudent/Student'
export default {
name: '组建的名字',
components: { Student },
methods: {
demo(params) {
console.log('从子组建传递过来的数据', params)
//从子组建传递过来的数据 {name: '我最可爱', age: 18}
}
}
}
</script>
-----------------------------------------------------------------------------
Student: 自定义事件 通过父组建@xx='xx' 子组建通过this.$emit('xx',{参数1，参数2,...})
<template>
<div class="div">
<button @click="sendFather">发送</button>
</div>
</template>
<script>
export default {
name: 'Student',
methods: {
sendFather() {
//点击本组建的方法，传递给父组建参数
this.$emit('hello', {
name: '我最可爱',
age: 18
})
}
}
}
</script>
3.ref（父子传参）
父亲：
<template>
<div class="div">
<Student ref="student" />
</div>
</template>
<script>
import Student from '../courseManage/courseStudent/Student'
export default {
name: '组建的名字',
components: { Student },
mounted() {
console.log(this.$refs.student)
//组建加载完毕后，hello事件是和子组建通信的，然后用this.demo函数取接收
this.$refs.student.$on('hello', this.demo)
//只执行一次,后面就不再触发了
// 1.this.$refs.student.$once('hello', this.demo)
// 2.setTimeout(() => {
//过3s以后执行这个事件，可点击，灵活
// this.$refs.student.$on('hello', this.demo)
//}, 3000)
},
methods: {
demo(params) {
console.log('从子组建传递过来的数据', params)
}
}
}
</script>
--------------------------------------------------------------------------------
儿子：
<template>
<div class="div">
<button @click="sendFather">发送</button>
</div>
</template>
<script>
export default {
name: 'child',
methods: {
sendFather() {
//点击本组建的方法，传递给父组建参数
this.$emit('hello', {
name: '我最可爱',
age: 18
})
}
}
}
</script>
解绑的时候
单个解绑//this.$off('事件1')
多个解绑//this.$off(['事件1','事件2'])
解绑全部//this.$off()
生命周期销毁 this.$destroy()//销毁了当前组建的实例，销毁后所有实例的自定义事件不奏效
4.vue全局事件总线，兄弟传参
1.一种组建件通信的方式，适用于任意组建的通信
2.安装全局事件总线：
new Vue({
...beforeCreate(){
Vue.prototype.$bus=this//安装全局事件总线，$bus就是当前应用的vm
},
...
})
3.使用事件总线
1.接受数据：A组建想接收数据，则在A组件中给$bus绑定自定义事件，事件的回调 ‘留在A组建自身’
methods(){
demo(data){
......
}
}
mounted(){
this.$bus.$on('xxx',this.demo)
}
2.提供数据：this.$bus.$emit('xxx',数据)
4.最好再beforeDestroy钩子中，用 $on去解绑当前组件所用到的事件
beforeDestroy(){
this.$bus.$off('xxx')
}
5.消息订阅与发布
1.一种组件间通讯的方式，适用于任意组建间通信
2.使用步骤：
1.安装pubsub:npm i pubsub-js
2.引入：import pubsub from 'pubsub-js'
3.接收数据：A组件想接收数据，则在A组件中订阅消息，订阅的回调留在A组件自身
methods(){
demo(msgName,data){
//msgName可以替换成‘_’去占位
console.log(msgName,data)//msgName 订阅消息的名字。data是接收的参数值
}
},
mounted(){
this.pid=pubsub.subscribe('xxx',this.demo)//订阅消息
// this.pid= pubsub.subscribe('xxx',(msgName,data)=>{
console.log(data)
})
}
4.提供数据：pubsub.publish('xxx',数据)
5.最好在beforeDestroy钩子中，用pubsub.unsubscribe(this.pid)//去取消订阅
