Vue入門(mén)八、非父子組件間通訊

發(fā)布時(shí)間：2020-08-31 20:24:07 來(lái)源：網(wǎng)絡(luò) 閱讀：372 作者：煢煢木偶欄目：web開(kāi)發(fā)

通過(guò)Bus總線機(jī)制實(shí)施非父子組件通訊
1、創(chuàng)建一個(gè)空實(shí)例（Bus中央事件總線也可以叫中間組件）
2、利用$emit $on 觸發(fā)和監(jiān)聽(tīng)事件實(shí)現(xiàn)非父子組件的通信
組件之間使用this.$bus.$on傳值之前需要先this.$bus.$off注銷事件
即：
this.$bus.$off('hiHeader').$on('hiHeader', (val) => {
this.sending = val
})
詳見(jiàn)：組件之間使用this.$bus.$on傳值之前需要先this.$bus.$off注銷事件

一、通過(guò)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() {
            // 先解綁再綁定，防止多組件點(diǎn)擊失效
            // 這里this.$bus.$on監(jiān)聽(tīng)中間件獲取數(shù)據(jù)
            this.$bus.$off('hiHeader').$on('hiHeader', (val) => {
                this.sending = val
            })
        }
    }
    var myFoot = {
        template: `
                <div>我是腳
                    <button @click="sendToHeader">發(fā)信息給頭部</button>
                </div>
            `,
        methods: {
            sendToHeader() {
                // 觸發(fā)hiHeader事件傳遞數(shù)據(jù)
                this.$bus.$emit('hiHeader', '我的頭可不是面團(tuán)捏的')
            }
        }
    }
    new Vue({
        el: '#app',
        components: {
            myHeader,
            myFoot
        },
        template: `
                <div>
                    <myHeader></myHeader>
                    <myFoot></myFoot>
                </div>
            `
    })
</script>

</body>
</html>

二、通過(guò)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">發(fā)信息給頭部</button>
                </div>
            `,
        methods: {
            sendToHeader() {
                // 觸發(fā)hiHeader事件傳遞數(shù)據(jù)
                this.$bus.$emit('hiHeader', '我的頭可不是面團(tuán)捏的')
            }
        }
    }
    new Vue({
        el: '#app',
        components: {
            myHeader,
            myFoot
        },
        template: `
                <div>
                    <myHeader></myHeader>
                    <myFoot></myFoot>
                </div>
            `
    })
</script>

</body>
</html>

向AI問(wèn)一下細(xì)節(jié)

Vue入門(mén)八、非父子組件間通訊

一、通過(guò)this.$bus.$on()方式

二、通過(guò)this重定向

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽

Vue入門(mén)八、非父子組件間通訊

一、通過(guò)this.$bus.$on()方式