Vue2.x中的父子组件相互通信的实现方法


Posted in Javascript onMay 02, 2017

业务场景:(这里指的是直接父子级关系的通信)

  • 美女(子组件)将消息发送给大群(父组件)
  • 大群(父组件)收到美女发送的消息后再回个信息给美女(子组件)

父组件

template

<template>
  <div>
    <p>群消息girl:</p>
    <div>
      {{ somebody }} 说: 我 {{ age }} 了。
    </div>
    <hr>
    <v-girl-group 
        :girls="aGirls" 
        :noticeGirl="noticeGirl"
        @introduce="introduceSelf"></v-girl-group>
  </div>
</template>

注意的点:

  • 这里在父组件使用v-on来监听子组件上的自定义事件($emit的变化),一旦发生变化noticeGirl方法就会触发
<script>
import vGirlGroup from './GirlGroup'
export default {
  name: 'girl',
  components: {
    vGirlGroup
  },
  data () {
    return {
      aGirls:[{
        name:'小丽',
        age:22
      },{
        name:'小美',
        age:21
      },{
        name:'小荷',
        age:24
      }],
      somebody:'',
      age:'',
      noticeGirl:''
    }
  },
  methods: {
    introduceSelf (opt) {
      this.somebody = opt.name;
      this.age = opt.age;
      // 通知girl收到消息
      this.noticeGirl = opt.name + ',已收到消息';
    }
  }
}
</script>

注意的点:

这里methods中定义的方法introduceSelf就是父组件接收到子组件发出的$emit的事件处理程序

子组件

template

<template>
  <div>
    <ul>
      <li v-for="(value, index) in girls">
        {{ index }} - {{ value.name }} - {{ value.age }} 
        <button @click="noticeGroup(value.name,value.age)">发送消息</button>
      </li> 
    </ul>
    <div>接收来自大群的消息:{{ noticeGirl }}</div>
  </div>
</template>

script

<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>

注意的点:

子组件使用$emit发出自定义事件

相比于Vue1.x的变化:

$dispatch 和 $broadcast 已经被弃用

*官方推荐的通信方式

首选使用Vuex

使用事件总线:eventBus,允许组件自由交流

具体可见:https://cn.vuejs.org/v2/guide/migration.html#dispatch-和-broadcast-替换

结果

Vue2.x中的父子组件相互通信的实现方法

Vue2.x中的父子组件相互通信的实现方法

Vue2.x中的父子组件相互通信的实现方法

以上所述是小编给大家介绍的Vue2.x中的父子组件相互通信,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript 常用方法总结
Jun 03 Javascript
基于ajax实现文件上传并显示进度条
Aug 03 Javascript
JavaScript中闭包的写法和作用详解
Jun 29 Javascript
JS实现针对给定时间的倒计时功能示例
Apr 11 Javascript
关于jquery form表单序列化的注意事项详解
Aug 01 jQuery
vue项目实战总结篇
Feb 11 Javascript
Vue filter介绍及详细使用
Apr 04 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
Mar 07 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 Javascript
15个值得收藏的JavaScript函数
Sep 15 Javascript
详解webpack 配合babel 将es6转成es5 超简单实例
May 02 #Javascript
jQuery树插件zTree使用方法详解
May 02 #jQuery
JavaScript数据结构学习之数组、栈与队列
May 02 #Javascript
js-FCC算法-No repeats please字符串的全排列(详解)
May 02 #Javascript
详解webpack+es6+angular1.x项目构建
May 02 #Javascript
jQuery Tree Multiselect使用详解
May 02 #jQuery
bootstrap的常用组件和栅格式布局详解
May 02 #Javascript
You might like
基于PHP文件操作的详解
2013/06/05 PHP
php遍历数组的4种方法总结
2014/07/05 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
PHP dirname简单使用代码实例
2020/11/13 PHP
在HTML代码中使用JavaScript代码的例子
2014/10/16 Javascript
Nodejs极简入门教程(二):定时器
2014/10/25 NodeJs
详谈JavaScript内存泄漏
2014/11/14 Javascript
BootStrap实现树形目录组件代码详解
2016/06/21 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
JavaScript三种绑定事件方式及相互之间的区别分析
2017/01/10 Javascript
Web开发中客户端的跳转与服务器端的跳转的区别
2017/03/05 Javascript
史上最全JavaScript常用的简写技巧(推荐)
2017/08/17 Javascript
说说node中的可读流和可写流的区别
2018/06/01 Javascript
老生常谈JS中的继承及实现代码
2018/07/06 Javascript
react-native使用leanclound消息推送的方法
2018/08/06 Javascript
生产制造追溯系统之在线打印功能
2019/06/03 Javascript
通过JQuery,JQueryUI和Jsplumb实现拖拽模块
2019/06/18 jQuery
vue实现购物车的监听
2020/04/20 Javascript
详解JavaScript中的数据类型,以及检测数据类型的方法
2020/09/17 Javascript
jQuery实现回到顶部效果
2020/10/19 jQuery
javascript实现时钟动画
2020/12/03 Javascript
python在非root权限下的安装方法
2018/01/23 Python
pycharm设置注释颜色的方法
2018/05/23 Python
Python求一批字符串的最长公共前缀算法示例
2019/03/02 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
python pyg2plot的原理知识点总结
2021/02/28 Python
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
REISS美国官网:伦敦最受欢迎的时尚品牌
2019/08/16 全球购物
巴西本土电商平台:Americanas
2020/06/21 全球购物
一些网络技术方面的面试题
2014/05/01 面试题
财务人员个人求职信范文
2013/12/04 职场文书
《北京的春节》教学反思
2014/04/07 职场文书
安全环保标语
2014/06/09 职场文书
带香烟到学校抽的检讨书
2014/09/25 职场文书
2015小学教师年度考核工作总结
2015/05/12 职场文书
win10电脑双屏显示一个黑屏怎么办?win10电脑双屏显示一个黑屏解决方法
2022/07/15 数码科技