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

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

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

父组件

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中的父子组件相互通信,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 详解vue2.0组件通信各种情况总结与实例分析

    Props在vue组件中各种角色总结 在Vue中组件是实现模块化开发的主要内容,而组件的通信更是vue数据驱动的灵魂,现就四种主要情况总结如下: 使用props传递数据---组件内部 //html <div id="app1"> <i>注意命名规定:仅在html内使用my-message</i> <child my-message="组件内部数据传递"></child> </div> //js

  • Vue.js每天必学之组件与组件间的通信

    什么是组件? 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能.在有些情况下,组件也可以是原生 HTML 元素的形式,以 is 特性扩展. 使用组件 注册 之前说过,我们可以用 Vue.extend() 创建一个组件构造器: var MyComponent = Vue.extend({ // 选项... }) 要把这个构造器用作组件,需要用 `Vue.compone

  • 详解Vue 非父子组件通信方法(非Vuex)

    一提到两个非父子组件通信方法,有经验的 coder 肯定会说用 Vuex 啊,我个人建议不要为了用 Vuex 而用 Vuex,除非你的项目很大,耦合度很高,需要大量的储存一些 data,组件之间通信频繁.当然还是要根据自己的业务场景的来决定,总之还是那句话,不要为了用 Vuex 而用 Vuex! Vue 官网介绍了非父子组件通信方法: 不过官网说的太简单了,新手看完估计还是一脸懵逼.还有这个空的 Vue 实例放到哪里合适也值得商榷. 这篇文章的目的就是用一个简单的例子让你明白如何用 Bus

  • vue组件父子间通信之综合练习(聊天室)

    本文实例为大家分享了vue组件父子间通信之聊天室的具体代码,供大家参考,具体内容如下 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>组件父子间通信之综合练习</title> <script src="js/vue.js"></script> </head> <body> &l

  • Vuejs第十篇之vuejs父子组件通信

    本篇文章是小编结合官方文档整理的一套更加细致,代码更多更全的教程,非常不错,比较适合新手阅读. 本篇资料来于官方文档: http://cn.vuejs.org/guide/components.html#u7236_u5B50_u7EC4_u4EF6_u901A_u4FE1 父子组件通信 ①访问子组件.父组件.根组件: this.$parent 访问父组件 this.$children 访问子组件(是一个数组) this.$root 根实例的后代访问根实例 示例代码: <div id="a

  • vue.js入门(3)——详解组件通信

    本文介绍vue.js组件,具体如下: 5.2 组件通信 尽管子组件可以用this.$parent访问它的父组件及其父链上任意的实例,不过子组件应当避免直接依赖父组件的数据,尽量显式地使用 props 传递数据.另外,在子组件中修改父组件的状态是非常糟糕的做法,因为: 1.这让父组件与子组件紧密地耦合: 2.只看父组件,很难理解父组件的状态.因为它可能被任意子组件修改!理想情况下,只有组件自己能修改它的状态. 每个Vue实例都是一个事件触发器: $on()--监听事件. $emit()--把事件沿

  • 深入探讨Vue.js组件和组件通信

    基本是按照官网的 Guide 全部梳理了一遍:http://vuejs.org/guide/index.html 这里我们以一个 Todo List 应用为例来把相关的只是都串起来,这篇里面的全部代码都在github上 https://github.com/lihongxun945/vue-todolist  Vue 实例 一个 Vue 应用是由一个 root vue instance 引导启动的,而 Vue instance 是这么创建的: var vm = new Vue({ // opti

  • vue + socket.io实现一个简易聊天室示例代码

    vue + vuex + elementUi + socket.io实现一个简易的在线聊天室,提高自己在对vue系列在项目中应用的深度.因为学会一个库或者框架容易,但要结合项目使用一个库或框架就不是那么容易了.功能虽然不多,但还是有收获.设计和实现思路较为拙劣,恳请各位道友指正. 可以达到的需求 能查看在线用户列表 能发送和接受消息 使用到的框架和库 socket.io做为实时通讯基础 vuex/vue:客户端Ui层使用 Element-ui:客户端Ui组件 类文件关系图 服务端: 客户端: 服

  • Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信

    最近在学习vue组件鸡组件之前通信问题,正好看到,以此来留作笔记. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Vue2-单一事件管理组件通信</title> <script src="vue.js"></script> <script type=

  • vue2.0父子组件及非父子组件之间的通信方法

    1.父组件传递数据给子组件 父组件数据如何传递给子组件呢?可以通过props属性来实现 父组件: <parent> <child :child-msg="msg"></child>//这里必须要用 - 代替驼峰 </parent> data(){ return { msg: [1,2,3] }; } 子组件通过props来接收数据: 方式1: props: ['childMsg'] 方式2 : props: { childMsg: Arr

随机推荐

其他