专栏首页前端开发ingVue-组件之间常用的通信方式
原创

Vue-组件之间常用的通信方式

Vue 组件之间常用的通信方式

  • props
  • 总线 eventbus
  • vuex
  • 自定义事件
    • 关系情况
      • $parent
      • $children
      • $root
      • $refs
      • provide/inject
    • 非 prop 特性
      • $attrs
      • $listener
	props 父->子传值 用属性
		parent
			<child :faData = '来自父亲'></child>
		child
			props:{
				faData:{
					type:String,
					default:""
				}
			}	
		子->父	 用自定义事件	
		child
			this.$emit('add',good)
		parent
			<child @add='cartAdd($event)'></child>
		
事件总线

任意两个组件之间值传递

	main.js 注册 
		Vue.prototype.$bus = new Vue()
	
	parent 
		<template>
			<child1 ></child1>
			<child2 ></child2>
		<template>
		
	child1
		this.$bus.$on('event-from-child2',msg=>{
				console.log(msg)
			})
	child2
		this.$bus.$emit('event-from-child2','some msg from child2')
$parent / $root
  • 发布订阅模式,事件派发和订阅的是一个人
	parent 里 child1 和child2 通信
	
		<child1></child1>
		<child2></child2>
		
		
	child1
		mounted(){
			this.$parent.$on('event-from-child1',msg=>{
				console.log(msg)
			})
		}
	
	child2
		mounted(){
			this.$parent.$emit('event-from-child2','some msg from child2')
		}
	
$children

父组件可以通过$children 访问子组件实现父子通信 $children 拿到的是一个子组件数组,不能保证子元素顺序

	parent
		<button @click='goHome'></button>
		goHome(){
			this.$children[0].eat()
		}
		
	child1
		eat(){
			console.log('马上回')
		}
	child2
$attrs / $listeners

包含了父作用域中不作为prop被识别(且获取)的特性绑定(class 和style 除外).当一个组件没有声明任何prop时,这里会包含所有父作用域的绑定(class 和 style 除外),并且可以通过v-bind = "$attrs" 传入内部组件——在创建高级别的组件时非常有用

	parent 
		<child foo='foo' @click='onClick'></child>
		onClick(){
			console.log("来自parent的回调函数处理")
		}
	child
		<p v-on='$listeners'>{{$attrs.foo}}</p>
		并未在props 中声明foo
		v-on='$listeners' 运行会被展开并监听(在parent里监听)
		
	child2
		
refs

获取子节点引用 | 访问普通的dom 元素

provide / inject 依赖注入可以跨层级传参

能够实现祖先和后代之间传值

	ancestor
		provide(){
			return {foo:'foo'}
		}
	descendant
		inject:['foo']
		可以起别名
		inject:{bar:{from:'foo'}}

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue组件间通信方式

      当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。在父组件中使用子组件,本质通过v-bind绑定属性传入子组件,子组件...

    TimothyJia
  • Vue中组件间通信的方式

    这种组件通信的方式是我们运用的非常多的一种,props以单向数据流的形式可以很好的完成父子组件的通信,所谓单向数据流,就是数据只能通过props由父组件流向子组...

    WindrunnerMax
  • Vue组件间通信6种方式

    组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用。一般来说,组件可以有以下几种关系:

    Fundebug
  • VUE组件之间的通信

    1.父子组件通信 父传子 (1)通过在父组件v-model绑定数据,在子组件进行用props进行数据的接收 父组件

    ZEHAN
  • Vue中组件最常见通信的方式

      父组件通过prop的方式向子组件传递数据,而通过$emit子组件可以向父组件通信。

    前端迷
  • Vue 组件间通信有哪几种方式?

    今天看vue的API,看到组件通信这一块,发现通信方式有好多种,但官网上的说明都是一笔带过,而且语句有点拗口,里面又有很多不理解的专有名词,以致于以前看的时候漏...

    美食江湖
  • Vue---父子组件之间的通信

      在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同。最常见的就是父组件为控制组件子组件为视图组件。父组件...

    半指温柔乐
  • VUE父子组件之间的通信

    在写组件嵌套过程中,必然涉及到父子组件之间的通信问题,父组件向子组件传递很简单,可以通过props来实现。

    OECOM
  • 【Vue课堂】Vue.js 父子组件之间通信的十种方式

    这篇文章介绍了Vue.js 父子组件之间通信的十种方式,不管是初学者还是已经在用 Vue 的开发者都会有所收获。无可否认,现在无论大厂还是小厂都已经用上了 Vu...

    用户4962466
  • Vue中组件之间8种通信方式,值得收藏

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢?首先我们需要知道在vue中组件之间存在什么样的关...

    前端达人
  • Vue中组件之间8中通信方式,值得收藏

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的...

    coder_koala
  • Vue中组件之间8中通信方式,值得收藏

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的...

    用户1462769
  • Vue中组件之间8中通信方式,值得收藏

    vue是数据驱动视图更新的框架, 所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢? 首先我们需要知道在vue中组件之间存在什么样的...

    用户6973020
  • Vue 组件通信的 8 种方式

    小阿新
  • Vue 组件间通信方法汇总

    除了使用 Vuex 方法外,vue 提供了各种各样的组件间通信的方案。文章整理一下父子组件、兄弟组件、祖先后代组件间是如何通信的。 ?

    JS菌
  • Vue 8种组件通信方式

    vue是数据驱动视图更新的框架,所以对于vue来说组件间的数据通信非常重要,那么组件之间如何进行数据通信的呢?

    前端小tips
  • React中组件间通信的方式

    props适用于父子组件的通信,props以单向数据流的形式可以很好的完成父子组件的通信,所谓单向数据流,就是数据只能通过props由父组件流向子组件,而子组件...

    WindrunnerMax
  • 面试官:Vue组件间通信方式都有哪些?

    都知道组件是vue最强大的功能之一,vue中每一个.vue我们都可以视之为一个组件

    @超人
  • Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览

    this.$parent   获取父组件实例 可以使用父组件实例的属性 this.$children 获取子组件数组 可以利用下标调用子组件实例的属性

    憧憬博客

扫码关注云+社区

领取腾讯云代金券