vue组件通信传值操作示例

本文实例讲述了vue组件通信传值操作。分享给大家供大家参考,具体如下:

父子组件通信:

子组件

<template>
 <div>
  <h3 @click="alerrt"> 我是子组件一</h3>
  <span>{{parentMessage}}</span>
 </div>
</template>
<script>
 export default{
  props: ['parentMessage'],
  mounted() {
   // this.$emit('childEvent');
  },
  methods:{
   alerrt(){
    this.$emit('childEvent',{name:'zhangsan',age:10 });
   }
  }
 }
</script>
<style scoped>
</style>

父组件

<template>
 <div>
  <h2>父组件</h2>
  <span>父组件传递消息给子组件</span>
  <br>
  <router-view @childEvent="parentMethod" :parentMessage="parentMessage" />
  <!-- <Child-one :parentMessage="parentMessage"></Child-one> -->
  <button type="" @click='extendTest'>extend</button>
  <div id="extend"></div>
 </div>
</template>
<script>
 import ChildOne from './ChildOne'
 export default{
  components: {
   ChildOne
  },
  methods: {
   parentMethod({name,age}) {
    alert(this.parentMessage);
    console.log(this.parentMessage,name,age);
   },
   extendTest() {
    console.log('333');
    var Extend = Vue.extend({
     template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',
     data: function () {
      return {
       firstName: 'Walter',
       lastName: 'White',
       alias: 'Heisenberg'
      }
     }
    })
    new Extend().$mount('#extend')
   },
  },
  data () {
   return {
    parentMessage: '我是来自父组件的消息aaaa'
   }
  }
 }
</script>
<style scoped>
</style>

兄弟组件通信:

在main,js里加

import Vue from 'vue'
window.eventBus = new Vue();

在组件里

兄弟1组件:

window.eventBus.$emit('函数名称', {参数 键:值});

兄弟2组件:

window.eventBus.$on('grouprecording',参数 =>{
//处理数据
})

希望本文所述对大家vue.js程序设计有所帮助。

时间: 2019-01-08

vue之父子组件间通信实例讲解(props、$ref、$emit)

组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.那么组件间如何通信,也就成为了vue中重点知识了.这篇文章将会通过props.$ref和 $emit 这几个知识点,来讲解如何实现父子组件间通信. 在说如何实现通信之前,我们先来建两个组件father.vue和child.vue作为示例的基础. //父组件 <template> <div> <h1>我是父组件!</h1> <child>

vue2利用Bus.js如何实现非父子组件通信详解

前言 大家应该都知道,vue2中废弃了$dispatch和$broadcast广播和分发事件的方法.父子组件中可以用props和$emit().如何实现非父子组件间的通信,可以通过实例一个vue实例Bus作为媒介,要相互通信的兄弟组件之中,都引入Bus,然后通过分别调用Bus事件触发和监听来实现通信和参数传递.下面话不多说了,来一起看看详细的介绍吧. Bus.js可以是这样 import Vue from 'vue' export default new Vue() 在需要通信的组件都引入Bus

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

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

vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法

上篇文章给大家介绍了浅析Vue自定义组件的v-model,大家可以参考下.接下来通过本文给大家介绍vue 自定义组件 v-model双向绑定. 父子组件同步通信的多种写法,具体详情如下所示: 父子组件通信,都是单项的,很多时候需要双向通信.方法如下: 1.父组件使用:msg.sync="aa"  子组件使用$emit('update:msg', 'msg改变后的值xxx') 2.父组件传值直接传对象,子组件收到对象后可随意改变对象的属性,但不能改变对象本身. 3.父组件使用: v-mo

详解Vue组件之间的数据通信实例

最近在用vue做项目,学习了不少东西,但是有时候光顾着做项目却忘记要找个时间来整理一下最近的一些学习新得,因为是新手,所以可能会有错误的地方,欢迎指出和交流呀~~~ 关于父子组件以及非父子组件之间的数据通信 1 父子组件之间数据通信 一般父组件向子组件传递数据用prop进行传递,注意,子组件不能对prop中的数据进行更改,vue中规定是防止子组件对父组件中的数据进行窜改.而子组件向父组件进行数据传递则可以通过事件触发父组件的事件来实现数据的传递.(是不是有点懵逼了,看个例子吧 ) (这里我就直接

Vue 兄弟组件通信的方法(不使用Vuex)

项目中,我们经常会遇到兄弟组件通信的情况.在大型项目中我们可以通过引入vuex轻松管理各组件之间通信问题,但在一些小型的项目中,我们就没有必要去引入vuex.下面简单介绍一下使用传统方法,实现父子组件通信的方法. 简单实例:我们在a组件中点击按钮,将信息传给b组件,从而使b组件弹出. 主要的思路就是:先子传父,在父传子 首先我们在 a.vue 组件中 ,给按钮botton绑定一个handleClick事件,事件中我们通过 this.$emit() 方法去触发一个自定义事件,并传递我们的参数. 示

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

详解vue组件通信的三种方式

1. 第一种方式就是官方推荐的 官方推荐方式 有时候两个组件也需要通信(非父子关系).在简单的场景下,可以使用一个空的 Vue 实例作为中央事件总线. 本质是通过派发事件然后监听事件从而更改值,(父子组件通信也可用这个方式,但是不同的一点就是父子组件通信的时候可以不用一个空的Vue实例来做中转,这种方式我这里就不做演示的了,因为我的题目是非父子通信) 空的Vue实例 bus import Vue from 'vue' const bus = new Vue() export default bu

Vue组件通信的四种方式汇总

前言 众所周知vue是一种mvvm框架,它相对于jquery可能比较大的差异点之一就在于组件之间的通信了.本文重点是梳理了前两个,父子组件通信和eventBus通信,我觉得Vue文档里的说明还是有一些简易,我自己第一遍是没看明白. 父子组件的通信 非父子组件的eventBus通信 利用本地缓存实现组件通信 Vuex通信 第一种通信方式:父子组件通信 父组件向子组件传递数据 父组件一共需要做4件事 1.import son from './son.js' 引入子组件 son 2.在componen

详解vue 路由跳转四种方式 (带参数)

1.  router-link 1. 不带参数 <router-link :to="{name:'home'}"> <router-link :to="{path:'/home'}"> //name,path都行, 建议用name // 注意:router-link中链接如果是'/'开始就是从根路由开始,如果开始不带'/',则从当前路由开始. 2.带参数 <router-link :to="{name:'home', para

vue中组件通信的八种方式(值得收藏!)

前言 之前写了一篇关于vue面试总结的文章, 有不少网友提出组件之间通信方式还有很多, 这篇文章便是专门总结组件之间通信的 vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的关系, 才更容易理解他们的通信方式, 就好像过年回家,坐着一屋子的陌生人,相互之间怎么称呼,这时就需要先知道自己和他们之间是什么样的关系. vue组件中关系说明: 如上图所示, A与B.A与C.B与D.C与E组件之间

关于react中组件通信的几种方式详解

前言 刚入门React可能会因为React的单向数据流的特性而遇到组件间沟通的麻烦,下面这篇文章就来给大家详细介绍下,在开始之前先来看一张图: react组件通信 需要组件之进行通信的几种情况 父组件向子组件通信 子组件向父组件通信 跨级组件通信 没有嵌套关系组件之间的通信 1. 父组件向子组件通信 React数据流动是单向的,父组件向子组件通信也是最常见的;父组件通过props向子组件传递需要的信息 Child.jsx import React from 'react'; import Pro

Vue组件通信的几种实现方法

组件的通信 一般常见的组件之间的通信有以下几种情况,A和B,B和C,B和D之间都是父子关系,C和D之间是兄弟组件关系. 常用的通信手段有两种: 1.ref:给元素或组件注册引用信息 2.children:访问父级组件和子组件的实例. 这两种方式都是直接通过实例的方式获取的方式.示例如下: //comA组件A export default { data () { return { title: '测试通信' } }, methods: { sayHello () { window.alert('你

vue组件创建的三种方式小结

1.使用Vue.extend创建全局的Vue组件 //1.1 使用vue.extend创建组件 var com1 = Vue.extend({ //通过template属性指定组件要展示的html结构 template : "<h3>使用vue.extend创建的组件</h3>" }) //1.2使用Vue.component('组件名称',创建出来的组件模板对象) Vue.component('myCom1',com1) 把名称以标签的形式放到页面中<m

Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)

当我们在书写 vue 组件的时候,也许可能会用到数据传递:将父组件的数据传递给子组件,有时候也需要通过子组件去事件去触发父组件的事件: 每当我们遇到这样的需求的时候,我们总是会想到有三种解决办法: 通过 props 的方式向子组件传递(父子组件) vuex 进行状态管理(父子组件和非父子组件) vuex 非父子组件的通信传递 Vue Event Bus ,使用Vue的实例,实现事件的监听和发布,实现组件之间的传递. 后来再逛社区的时候我又发现了还有第四种传递方式, inheritAttrs +

详解Vue组件之间通信的七种方式

使用Vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下. 父子组件之间的通信 1)props和$emit 父组件通过props将数据下发给props,子组件通过$emit来触发自定义事件来通知父组件进行相应的操作 具体代码如下: ``` // 父组件 <template> <div> <h3>props和$emit</h3> <Children v-on:changeMsg="changeMsg"

Vue.js组件通信的几种姿势

写在前面 因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出. 文章的原地址: https://github.com/answershuto/learnVue . 在学习过程中,为Vue加上了中文的注释 https://github.com/answershuto/learnVue/tree/master/vue-src ,希望可以对其他想学习Vue源码的小伙伴有所帮助. 可能会有理解存在偏差的地方,欢迎提issu