[VUE]父子通信及事件总线记录

[VUE]父子组件通信以及事件总线整理

常用的组件间的通信方法有父传子,子传父,以及通信事件总线
我们一个一个来,首先

父组件传子组件

这是父组件的内容01

01
<template>
    <div>
        <vueb :transform=msg></vueb>
        //transform为自定义的绑定名称
        <h4>父组件layout</h4>
    </div>
</template>
<script>
import vueb from '@/views/vueb';
    export default {
        components: {           
            vueb
        },
        data() {
            return {
                msg:'im msg from layout'
            }
        }
</script>

子组件中02

<template>
    <div>
        <h4>vueb</h4>
        <p>{{transform}}</p>
        <hr>
    </div>
</template>

<script>
    export default {
        props: {
            transform: {	//父组件定义的名称,用以接收
                type: String,	//定义接收类型
                default: 'nothing'	//如果接收不到的默认值
            },
        },
    }
</script>

子组件向父组件传值

子组件vuea 03

03
<template>
    <div>
        <h4>vuea</h4>
        <button @click="submit">传递msg给Layout</button>
        <hr>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                msg:[
                    {id:1,name:'im from vuea'},
                    {id:2,name:'im from vuea'},
                    {id:3,name:'im from vuea'},
                ]
            }
        },
        methods: {
            submit() {
                this.$emit('submit',this.msg)
                //提交传递
            },
        },
    }
</script>

父组件layout 04

04
<template>
    <div>
        <vuea @submit='getmsg'></vuea>
        <vueb :transform=msg></vueb>
        <h4>layout</h4>
    </div>
</template>

<script>
import vuea from '@/views/vuea';
import vueb from '@/views/vueb';

    export default {
        components: {
            vuea,
            vueb
        },
        data() {
            return {
                msg:'im msg from layout'
            }
        },
        methods: {
          getmsg(val){
              console.log('val',val)
          }
        },
    }
</script>

<style scoped>

</style>

组件间的通信总线

定义bus.js

import Vue from 'vue'
const bus=new Vue()
export default bus

组件vuea 05

05
<template>
    <div>
        <h4>vuea</h4>
        <button @click="submitB">ab通信</button>
        <hr>
    </div>
</template>

<script>
import bus from '@/until/bus.js'
    export default {
         methods: {
           submitB(){
                bus.$emit('msg','this msg from vuea')
            }
        },
    }
</script>

组件vueb 06

在这里插入代码片

<template>
    <div>
        <h4>vueb</h4>
        <p>vuea传来的{{msg}}</p>
        <hr>
    </div>
</template>

<script>
import bus from '@/until/bus.js'
    export default {
        data() {
            return {
                msg: ''
            }
        },
        mounted(){
            bus.$on('msg',(val)=>{ //这里一定是箭头函数,
            						否则this指向会出现问题
                this.msg=val
            })
        	 bus.$off('msg') //销毁事件总线
        }
    }
</script>