Vue入门八、非父子组件间通讯

发布时间：2020-08-31 20:24:07 作者：茕茕木偶
来源：网络阅读：374

通过Bus总线机制实施非父子组件通讯
1、创建一个空实例（Bus中央事件总线也可以叫中间组件）
2、利用$emit $on 触发和监听事件实现非父子组件的通信
组件之间使用this.$bus.$on传值之前需要先this.$bus.$off注销事件
即：
this.$bus.$off('hiHeader').$on('hiHeader', (val) => {
this.sending = val
})
详见：组件之间使用this.$bus.$on传值之前需要先this.$bus.$off注销事件

一、通过this.$bus.$on()方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
    // 定义通讯中间件
    Vue.prototype.$bus = new Vue()

    var myHeader = {
        template: `
                <div>我是头部|{{sending}}
                </div>
            `,
        data() {
            return {
                sending: ''
            }
        },
        created() {
            // 先解绑再绑定，防止多组件点击失效
            // 这里this.$bus.$on监听中间件获取数据
            this.$bus.$off('hiHeader').$on('hiHeader', (val) => {
                this.sending = val
            })
        }
    }
    var myFoot = {
        template: `
                <div>我是脚
                    <button @click="sendToHeader">发信息给头部</button>
                </div>
            `,
        methods: {
            sendToHeader() {
                // 触发hiHeader事件传递数据
                this.$bus.$emit('hiHeader', '我的头可不是面团捏的')
            }
        }
    }
    new Vue({
        el: '#app',
        components: {
            myHeader,
            myFoot
        },
        template: `
                <div>
                    <myHeader></myHeader>
                    <myFoot></myFoot>
                </div>
            `
    })
</script>

</body>
</html>

二、通过this重定向

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script type="text/javascript" src="vue.js"></script>
<div id="app"></div>
<script type="text/javascript">
    // 定义通讯中间件
    Vue.prototype.$bus = new Vue()

    var myHeader = {
        template: `
                <div>我是头部|{{sending}}
                </div>
            `,
        data() {
            return {
                sending: ''
            }
        },
        created() {
            // 重定向this
           var transfer = this
            // transfer.$bus.$off('hiHeader').$on('hiHeader', function (val) {
            //     transfer.sending = val
            // })
            transfer.$bus.$on('hiHeader', (val)=>{
                transfer.sending = val
            })
        }
    }
    var myFoot = {
        template: `
                <div>我是脚
                    <button @click="sendToHeader">发信息给头部</button>
                </div>
            `,
        methods: {
            sendToHeader() {
                // 触发hiHeader事件传递数据
                this.$bus.$emit('hiHeader', '我的头可不是面团捏的')
            }
        }
    }
    new Vue({
        el: '#app',
        components: {
            myHeader,
            myFoot
        },
        template: `
                <div>
                    <myHeader></myHeader>
                    <myFoot></myFoot>
                </div>
            `
    })
</script>

</body>
</html>

Vue入门八、非父子组件间通讯

一、通过this.$bus.$on()方式

二、通过this重定向

相关阅读