Vue组件间常用的的通信方式

在Vue中，组件间的消息传递是至关重要的。组件时vue.js最强大的功能之一。组件实例的作用域是相互独立的，所以不同组件之间的数据就无法相互引用。
组件之间的关系可以如下所示：


image.png

A和B、B和C、B和D是父子关系，C和D是兄弟关系，A和C是隔代关系（可隔多代）
对于不同的关系，组件之间的通信可以有不同的方式。

1. 父子组件通信

父组件向子组件传递数据是通过prop传递的。父组件在嵌套子组件template的时候，使用单项数据绑定的方式，将父组件的数据绑定到子组件身上。如下代码第17行。
子组件通过prop属性来接收父组件传递来的数据，此数据可以直接使用，就相当于在data中定义过了。
子组件可以对接收的数据进行数据验证，直接定义类型则验证其类型，使用对象形式则可用validator方法来对其进行进一步的较复杂的验证。但需注意，如果只验证，不进行其他操作，则验证错误会在控制台中显示出错误信息，并不影响页面的渲染。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>父子组件通信</title>
</head>
<body>
    <div id="app">
        <Father/>
    </div>
    <template id="father">
        <!--唯一根元素-->
        <div>
            <h3>父组件</h3>
            <!--我们使用单项数据绑定的方式，将父组件的数据绑定到子组件身上-->
            <!--这个属性自己定义-->
            <Son v-bind:money="money"/>
        </div>
    </template>
    <template id="son">
        <div>
            <h3>子组件</h3>
            <p>父组件传递过来的数据是： {{ money }}</p>
        </div>
    </template>
</body>
<script src="vue/vue.js"></script>
<script>
    // 父组件 - 定义数据的
    Vue.component('Father',{
        template:'#father',
        data() {
            return {
                money: '2000'
            }
        }
    })

    // 子组件 - 接收数据的
    Vue.component('Son', {
        template:'#son',
        // props: ['money'] // 子组件通过props选项来接收数据，接收到的数据可以直接使用，类似直接在data选项中定义一样。
        // 数据验证：对所接收的数据进行类型验证。如果验证出错，会在控制台显示warning，但不会阻止页面渲染。
        props: {
            // money: Number // 我接收的money是Number类型
            money: {
                validator(value) { // vue中提供了validator这个验证函数
                    return value > 3000 // 我要的比3000块要多
                }
            }
        }
    })

    new Vue({
        el: '#app'
    })
</script>
</html>

2. 子父组件通信

子组件向父组件传递数据是通过$emit触发事件来做到的。
例如这样一个场景：父亲节的时候，儿子向父亲送红包，父亲收到红包之后把红包藏在自己私房钱小金库里。
所以子组件要有一个give()来给红包，父组件要有一个hide()来藏红包。
结合的关键就是父组件嵌入子组件template时使用自定义事件的形式将自己的hide()方法绑定到子组件身上，以便子组件能够调用该方法。如下代码的第18行。
子组件接收到此方法后，可以使用this.$emit('hide', this.redEnvelop)来调用父组件的hide()方法，其中'hide'是父组件将此方法绑定给子组件时自定义的事件名称，第二个参数(this.redEnvelop)则是调用hide()时的参数。将整个调用过程封装到子组件的give()方法中，就可以实现子父组件通信。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>子父组件通信</title>
</head>
<body>
    <div id="app">
        <Father/>
    </div>
    <template id="father">
        <div>
            <h3>父组件</h3>
            <p>父亲的小金库有： {{ xiaoJinKu }}</p>
            <hr>
            <!--使用自定义事件的形式将hide这个方法绑定到子组件身上-->
            <!--事件的名字自己随意定义-->
            <Son @hide="hide" />
        </div>
    </template>
    <template id="son">
        <div>
            <h4>子组件</h4>
            <button @click="give">发红包</button>
        </div>
    </template>
</body>
<script src="vue/vue.js"></script>
<script>
    // 模拟一个场景，父亲节，我们往往要给父亲一个礼物（比如红包）
    // 你 红包     给 你发出的
    // 父亲 接受红包，然后藏到自己的私房钱小金库中
    Vue.component('Father', {
        template: '#father',
        data() {
            return {
                xiaoJinKu: 500
            }
        },
        methods: {
            hide(value) { // value表示子组件发过来的红包
                // 藏起来
                this.xiaoJinKu += value
            }
        }
    })

    Vue.component('Son', {
        template: '#son',
        data() {
            return {
                redEnvelop: 8888
            }
        },
        methods: {
            give() {
                // 给红包
                this.$emit('hide', this.redEnvelop) // 这里的hide是父组件将hide绑定到子组件时(第18行)自定义的名字
            }
        }
    })

    new Vue({
        el:'#app'
    })
</script>
</html>

3. 兄弟组件通信（借助ref与prop）

很多时候，组件的通信往往不是简单的父子关系，如下面一个模拟场景：
父亲有一子一女，女儿打儿子，儿子哭。
那girl与son怎么交互呢？经过上面的父子组件通信，我们可以联想到，通过父组件作为媒介来进行通信。
这种方法主要利用了ref与prop来将父组件作为中间媒介。该方法实现时过于复杂，且组件隔代越多，写起来就越复杂臃肿，不推荐用。
即girl组件有一个hit()方法，son组件有一个flag数据，默认为false，当其为true时则儿子开始哭（显示为页面多一个内容为5555的p标签）。
首先，父组件在嵌入子组件template时加上ref属性，以便在父组件中调用子组件中的内容。如下代码的第15行。
接着，在父组件中写一个名为fn()的methods，通过this.$refs.son.changeFlag()来调用son组件的changeFlag()方法，以达到页面中p标签显示的开关切换。
最后，父组件在嵌入girl组件template时，使用单项数据绑定的方式，将父组件的数据绑定到girl组件身上。如下代码第14行。
girl组件通过prop属性来接收父组件传递来的fn()方法，随后在自己的hit()方法中调用fn()，即可达到通过父组件与son组件通信的效果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>非父子组件通信</title>
</head>
<body>
<div id="app">
    <Father/>
</div>

<template id="father">
    <div>
        <Girl :fn="fn"></Girl>
        <Son ref="son"></Son>
    </div>
</template>
<template id="son">
    <div>
        <p v-if="flag">555555555555555</p>
    </div>
</template>
<template id="girl">
    <div>
        <button @click="hit">揍弟弟</button>
    </div>
</template>
</body>
<script src="vue/vue.js"></script>
<script>
    // father son girl
    // 模拟场景： girl 打 son，son做出的动作：哭
    Vue.component('Father', {
        template: '#father',
        methods: {
            fn() {
                // console.log(this)
                // 通过this.$refs.son找到son组件，里面就有changeFlag()方法
                this.$refs.son.changeFlag()
            }
        }
    })
    
    Vue.component('Son', {
        template: '#son',
        data() { // 自己的数据自己改
            return {
                flag: false
            }
        },
        methods: {
            changeFlag() {
                this.flag = !this.flag // 开关的典型做法
            }
        }
    })

    Vue.component('Girl', {
        template: '#girl',
        props: ['fn'],
        methods: {
            hit() {
                this.fn()
            }
        }
    })

    new Vue({
        el: '#app'
    })
</script>
</html>

4. 非父子组件通信（借助eventBus事件总线）

定义一个新的Vue实例bus：const bus = new Vue()，在bus上有两个重要属性：$on和$emit，这两个属性都属于node event api -> EventEmitter
选择与3同样的实例，在Son组件中数据初始化完毕之后，利用生命周期钩子，把changeFlag()方法挂载到bus.$on的自定义函数上（如下代码的第52行）。
此处生命周期钩子的选择应该在数据初始化完毕之后，所以应该是beforeCreate()之后，如created()、beforeMount()、Mounted()。
然后再Girl组件中，就可以用bug.$emit('自定义函数名')来调用事件总线上挂载的Son组件中的方法。
这种方法不会因为组件关系复杂而受到很大变化，所以推荐使用。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件总线进行组件通信</title>
</head>
<body>
<div id="app">
    <Father></Father>
</div>

<template id="father">
    <div>
        <Girl></Girl>
        <Son></Son>
    </div>
</template>

<template id="son">
    <div>
        <p v-if="flag">555555555555555</p>
    </div>
</template>

<template id="girl">
    <div>
        <button @click="hit">揍臭弟弟要趁早</button>
    </div>
</template>
</body>
<script src="vue/vue.js"></script>
<script>
    const bus = new Vue()
    // bus上有两个重要属性：$on $emit 这两个属性来自于node events api -> EventEmitter

    Vue.component('Father', {
        template: '#father'
    })

    Vue.component('Son', {
        template: '#son',
        data() {
            return {
                flag: false
            }
        },
        methods: {
            changeFlag() {
                this.flag = !this.flag
            }
        },
        created() { // 或者beforeMount()、mounted()
            bus.$on('beat', this.changeFlag) // 事件的定义
        }
    })

    Vue.component('Girl', {
        template: '#girl',
        methods: {
            hit() {
                bus.$emit('beat') // 事件的调用
            }
        }
    })

    new Vue({
        el:'#app'
    })
</script>
</html>

5. 隔代组件通信

父子组件通信我们可以通过prop、$emit来实现，但遇到隔代组件，就要嵌套多层prop或$emit来实现隔代通信，这显示是不现实的。Vue2.4中开始提供了$attrs和$listeners来解决这个问题，能让组件之间隔代通信。
$attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
$listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>利用$attrs和$listeners进行隔代通信</title>
</head>
<body>

<div id="app"></div>

</body>
<script src="vue/vue.js"></script>
<script>
    Vue.component('C', {
        template: `
            <div>
                <input type="text" v-model="$attrs.messagec" @input="passCData($attrs.messagec)">
            </div>
        `,
        methods: {
            passCData(val) {
                // 触发父组件A中的事件
                this.$emit('getCData', val)
            }
        }
    })

    Vue.component('B', {
        data() {
            return {
                mymessage: this.message
            }
        },
        template: `
            <div>
                <input type="text" v-model="mymessage" @input="passData(mymessage)">
                <!-- C组件中能直接触发getCData的原因在于 B组件调用C组件时 使用 v-on 绑定了$listeners 属性 -->
                <!-- 通过v-bind 绑定$attrs属性，C组件可以直接获取到A组件中传递下来的props（除了B组件中props声明的）-->
                <C v-bind="$attrs" v-on="$listeners"></C>
            </div>
        `,
        props: ['message'], // 得到父组件传递过来的数据
        methods: {
            passData(val) {
                // 触发父组件中的事件
                this.$emit('getChildData', val)
            }
        }
    })

    Vue.component('A', {
        template: `
            <div>
                <p>this is parent compoent!</p>
                <B :messagec="messagec" :message="message" v-on:getCData="getCData" v-on:getChildData="getChildData(message)"></B>
            </div>
        `,
        data() {
            return {
                message: 'hello',
                messagec: 'hello c' // 传递给c组件的数据
            }
        },
        methods: {
            getChildData(val) {
                console.log('这是来自B组件的数据')
            },
            getCData(val) {
                console.log('这是来自C组件的数据' + val)
            }
        }
    })

    var app = new Vue({
        el: '#app',
        template: `
            <div>
                <A></A>
            </div>
        `
    })
</script>
</html>

祖先组件向子孙组件传值（provide和inject）

provide/inject API主要解决了跨级组件间的通信问题，可以允许一个祖先组件向其所有子孙组件诸如一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。
即祖先组件通过provide来提供变量，然后在子孙组件中通过inject来注入变量。
不过它的使用场景主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>provide/inject实现跨级组件通信</title>
</head>
<body>
<div id="app"></div>
</body>
<script src="vue/vue.js"></script>
<script>
    /* provide/inject API主要解决了跨级组件间的通信问题，可以允许一个祖先组件向其所有子孙组件诸如一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效。
    即祖先组件通过provide来提供变量，然后在子孙组件中通过inject来注入变量。
    不过它的使用场景主要是子组件获取上级组件的状态，跨级组件间建立了一种主动提供与依赖注入的关系。
     */
    Vue.component('child', {
        inject: ['for'], // 得到父组件传递过来的数据
        data() {
            return {
                mymessage: this.for
            }
        },
        template: `
            <div>
                <input type="text" v-model="mymessage">
            </div>
        `
    })

    Vue.component('parent', {
        template: `
            <div>
                <p>this is parent component!</p>
                <child></child>
            </div>
        `,
        provide: {
            for: 'test'
        },
        // 若要provide出data中的数据可以这样写：
        // provide: function() {
        //     return {
        //         for: this.message
        //     }
        // },
        data() {
            return {
                message: 'hello'
            }
        }
    })

    var app = new Vue({
        el: '#app',
        template: `
            <div>
                <parent></parent>
            </div>
        `
    })
</script>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 205,033评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 87,725评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,473评论 0赞 338
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,846评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,848评论 5赞 368
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,691评论 1赞 282
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,053评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,700评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 42,856评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,676评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,787评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,430评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,034评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,990评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,218评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,174评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,526评论 2赞 343