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 相关文章推荐
js特殊字符转义介绍
Nov 05 Javascript
js控制div弹出层实现方法
May 11 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
Dec 10 Javascript
JS设置CSS样式的方式汇总
Jan 21 Javascript
详解vue项目优化之按需加载组件-使用webpack require.ensure
Jun 13 Javascript
vue.js实例todoList项目
Jul 07 Javascript
vue的过滤器filter实例详解
Sep 17 Javascript
基于Vue 实现一个中规中矩loading组件
Apr 03 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
javascript实现蒙版与禁止页面滚动
Jan 11 Javascript
JavaScript Date对象功能与用法学习记录
Apr 28 Javascript
微信小程序开发(二):页面跳转并传参操作示例
Jun 01 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初学者们头痛的十四个问题
2007/01/15 PHP
PHP多文件上传实例
2015/07/09 PHP
PHP与jquery实时显示网站在线人数实例详解
2016/12/02 PHP
[原创]PHP获取数组表示的路径方法分析【数组转字符串】
2017/09/01 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
理解JavaScript的caller,callee,call,apply
2009/04/28 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
如何将一个String和多个String值进行比较思路分析
2013/04/22 Javascript
jquery实现动态画圆
2014/12/04 Javascript
jquery动画效果学习笔记(8种效果)
2015/11/13 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
React实现点击删除列表中对应项
2017/01/10 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
2017/07/17 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
Vue 组件参数校验与非props特性的方法
2019/02/12 Javascript
Vue插槽原理与用法详解
2019/03/05 Javascript
vue eslint简要配置教程详解
2019/07/26 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
vant实现购物车功能
2020/06/29 Javascript
[03:20]次级联赛厮杀超职业 现超级兵对拆世纪大战
2014/10/30 DOTA
Python实现Windows和Linux之间互相传输文件(文件夹)的方法
2017/05/08 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
详解python中init方法和随机数方法
2019/03/13 Python
python自定义时钟类、定时任务类
2021/02/22 Python
Python调用shell cmd方法代码示例解析
2020/06/18 Python
基于django和dropzone.js实现上传文件
2020/11/24 Python
html5中为audio标签增加停止按钮动作实现方法
2013/01/04 HTML / CSS
Sunglass Hut巴西网上商店:男女太阳镜
2020/10/04 全球购物
软件配置管理有什么好处
2015/04/15 面试题
实习心得体会
2014/01/02 职场文书
入党函调证明材料
2014/12/24 职场文书
采购部年度工作总结
2015/08/13 职场文书
先进基层党组织主要事迹材料
2015/11/03 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python