vue 组件传值、通信

3 篇文章 0 订阅

父组件=>子组件

属性props

//child
props:{ msg: String }
//parent
<HelloWorld msg="welcome to vue.js" \>

引用refs

//parent
<HelloWorld refs="test" />
this.$refs.test.xxx

子组件=>父组件

自定义事件

//child 
this.$emit('add' , good)
// parent
<Cart @add="cartAdd($event)" />

兄弟组件之间通信

通过共同祖辈搭桥 $parent或 $root

// brother1
this.$parent.$on('foo', handle)
// brother2
this.$parent.$emit('foo')

祖先与后代组件

vue 提供了provide/inject API完成该任务
provide / inject: 能够实现祖先给后代传值

//ancestor
provide(){
	return { foo : ' foo ' }
}
//descendant
inject : [ ' foo' ]

注意: provide和inject 主要是为高阶插件、组件库提供用例。并不推荐直接用于应用程序代码中。该方法不能做到后代给祖先传值。
后代 给祖先传值 : dispatch

// 自定义一个dispatch 方法,指定要派发事件名称和数据
function dispatch( eventName , data ){
	var parent = this.$parent;
	// 只要还存在父元素就继续往上查找
	while(parent){
		if(parent){
			// 父元素用$emit 触发
			parent.$emit(eventName , data );
			// 递归查找父元素
			parent=parent.$parent
		}else{
			break;
		}
	}
}
//  使用在后代组件   (某个页面中)
<h1 @click="dispatch('hello','hello world')">{{ msg }}</h1>
//  祖先组件中 
this.$on("hello",this.sayHello)

任意两个组件:事件总线或者 VUEX
事件总线 bus

var bus = new Vue()
// A组件中
bus.$emit('data-a', data)
//B组件中
bus.$on('data-a', getData)

vuex: 创建一个全局数据管理者store , 通过它管理数据并通知组件状态变更

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值