起步 - 从场景中看父子组件间通信

组件间通信是组件开发的,我们既希望组件的独立性,数据能互不干扰,又不可避免组件间会有联系和交互。

在vue中,父子组件的关系可以总结为props down,events up

在vue2.0中废弃了$dispatch$broadcast,子组件使用event发出自定义事件

 父子组件之间的通信

 思考场景如下:

  一个总群(父组件)中大家做自我介绍,

  陌陌、小小、可可、天天 收到 总群发来的消息之后(父传子),将自己的信息发送到总群(子传父

父组件 

template

<template>
    <div>
        <h4>父组件>></h4>
        <div>
            <span>{{ somebody }}</span> 说: 我来自 <span>{{ city }} </span>
        </div>
        <hr>
        <!-- aGirls和noticeGirl通过props传递给子组件 -->
        <!-- introduce通过$emit子组件传递给父组件 -->
        <v-girl-group :girls="aGirls" :noticeGirl="noticeGirl" @introduce="introduceSelf"></v-girl-group>
    </div>
</template>

 我使用的组件间通信:

  • aGirls和noticeGirl通过 props 传递给子组件
  • 通过 $emit 子组件传递给父组件,v-on来监听父组件自定义事件($emit的变化)

script

<script>
import vGirlGroup from './components/HelloWorld'
export default {
    name: 'girl',
    components: {
        vGirlGroup
    },
    data () {
        return {
            aGirls:[{
                name:'陌陌',
                city:'GuangZhou'
            },{
                name:'小小',
                city:'BeiJing'
            },{
                name:'可可',
                city:'American'
            },{
                name:'天天',
                city:'HangZhou'
            }],
            somebody:'',
            city:'',
            noticeGirl:''
        }
    },
    methods: {
        introduceSelf (opt) {
            this.somebody = opt.name;
            this.city = opt.city;

            // 通知girl收到消息
            this.noticeGirl = opt.name + ',已收到消息';
        }
    }
}
</script>

这里的 introduceSelf 就是父组件接收到子组件发出的$emit事件处理程序

子组件

template

<template>
    <div>
      <h4>子组件>></h4>
       <ul>
           <li v-for="(value, index) in girls">
                {{ index }} - {{ value.name }} - {{ value.city }} 
                <button @click="noticeGroup(value.name,value.city)">发送消息</button>
            </li> 
       </ul>
       <div class="msg">接收来自父组件的消息:{{ noticeGirl }}</div>
    </div>
</template>

script

子组件通过$emit发出自定义事件

<script>
export default {
    name: 'girl-group',
    props: {
        girls: {
            type: Array,
            required: true
        },
        noticeGirl: {
            type: String,
            required: false
        }
    },
    methods: {
        noticeGroup (name, age) {
            this.$emit('introduce',{
                name: name,
                age: age
            })
        }
    }
}
</script>

结果

到这里,我们已经根据vue2.0父子间通信实现了上面提出的一个场景 .

相比vue1.0的变化:具体可以参考:https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏程序员的SOD蜜

功能实现了软件就做好了吗?

    常常在问自己这样一个问题,也听到很多人都说“先实现功能”,也许在某种意义上不得不如此,但我认为这不是真正意义上的软件开发,实现功能重要,软件的维护更重要...

19410
来自专栏极客猴

一道关于 TCP 连接的题目

小陈点了点头表示很熟悉,然后一口气将 TCP 连接中三次握手和四次分手详细地说了一遍。心想暗笑,这问题难不倒我的,哈哈。

621
来自专栏互联网研发闲思录

java多线程开发容易犯的错误

      昨天在社区上看到有人讨论多线程使用,多线程遇到一些问题以及一些使用技巧记录一下。为什么要使用多线程, 不能是为了用而用,和设计模式一样用的合理,会让...

2066
来自专栏ThoughtWorks

TW洞见 | 用TDD影响设计

在听过Martin Fowler、Kent Beck和DHH关于TDD的讨论以后,我想也把我关于TDD的想法记录下来——我为什么要遵从它,以及为什么我会发现它做...

3448
来自专栏极客猴

一道关于 TCP 连接的题目

小陈点了点头表示很熟悉,然后一口气将 TCP 连接中三次握手和四次分手详细地说了一遍。心想暗笑,这问题难不倒我的,哈哈。

561
来自专栏互联网杂技

关于Java面试,你应该准备这些知识点

马老师说过,员工的离职原因很多,只有两点最真实: 钱,没给到位 心,受委屈了 当然,我是想换个平台,换个方向,想清楚为什么要跳槽,如果真的要跳槽,想要拿到一个理...

3487
来自专栏Jerry的SAP技术分享

在ABAP里模拟实现Java Spring的依赖注入

Dependency Injection- 依赖注入,在Java Spring框架中有着广泛地应用。通过依赖注入,我们不必在应用代码里繁琐地初始化依赖的资源,非...

832
来自专栏web前端教室

学点http、tch协议,不用多一点就行

今天群里有同学分享了一个文章,文中说面试的时候,来的人连http协议是啥都不知道,就这样还要16K, 18K的,怎么说的出口,反正文笔很酸爽。 其实,我也不太...

1858
来自专栏恰同学骚年

设计模式的征途—7.适配器(Adapter)模式

在现实生活中,我们的笔记本电脑的工作电压大多数都是20V,而我国的家庭用电是220V,如何让20V的笔记本电脑能够工作在220V的电压下工作?答案:引入一个电源...

833
来自专栏Java3y

面试前需要了解的东西

我在面试前针对Java基础也花了不少的时间,期间也将自己写过的博文粗略地刷了一遍,同时也在网上找了不少比较好的资料(部分是没看完的)。在这里给大家分享一下~~~

810

扫码关注云+社区