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

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

在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 条评论
登录 后参与评论

相关文章

来自专栏.NET技术

GC的前世与今生

  虽然本文是以.NET作为目标来讲述GC,但是GC的概念并非才诞生不久。早在1958年,由鼎鼎大名的图林奖得主John McCarthy所实现的Lisp语言就...

1083
来自专栏王亚昌的专栏

程序的存储空间布局

栈 由编译器自动分配释放管理。局部变量及每次函数调用时返回地址、以及调用者的环境信息(例如某些机器寄存器)都存放在栈中。新被调用的函数在栈上为其自动和临时变量分...

1112
来自专栏nnngu

百度搜索 “Java面试题” 前200页(面试必看)

本文中的题目来源于网上的一篇文章《百度搜索 “Java面试题” 前200页》,但该文章里面只有题目,没有答案。因此,我整理了一些答案发布于本文。本文整理答案的原...

60911
来自专栏祝威廉

Spark Tungsten-sort Based Shuffle 分析

看这篇文章前,建议你先简单看看Spark Sort Based Shuffle内存分析。

702
来自专栏蓝天

Oops错误

在at91rm9200下写了一个spi的驱动,加载后,运行测试程序时,蹦出这么个吓人的东西: Unable to handle kernel paging r...

671
来自专栏JAVA高级架构

Java 面试题:百度前200页都在这里了

基本概念 操作系统中 heap 和 stack 的区别 什么是基于注解的切面实现 什么是 对象/关系 映射集成模块 什么是 Java 的反射机制 什么是 ACI...

3536
来自专栏微信公众号:Java团长

Java面试题:百度前200页都在这里了

transient变量有什么特点 super什么时候使用 public static void 写成 static public void会怎样 说明一下pub...

772
来自专栏nnngu

记录某公司(简称SMKJ) 的一次面试

昨天去了一家公司面试 Java 开发岗位,这篇文章主要是做一个面试的记录以及总结。

5309
来自专栏海纳周报

JVM杂谈之JIT

JIT技术是JVM中最重要的核心模块之一。因为不断有朋友问起,Java到底是怎么运行的?既然Hotspot是C++写的,那Java是不是可以说运行在C++之上呢...

35712
来自专栏大魏分享(微信公众号:david-share)

干货来了:构建RESTful Web Service分几步?| 从开发角度看应用架构11

为了不同应用组件的互联互通,web services通过http将标准的通讯方式暴露出来。通过将应用抽取成独立的组件,并让这些组件通过web service方式...

1072

扫码关注云+社区