vue--组件之间的操作

本文详细介绍了Vue.js中父子组件、兄弟组件之间的数据传递与事件触发机制,包括使用this.$refs、this.parent、emit和on等方法实现组件间的通信。

父子节点之间的相互获取


用this.$refs.child,这个child与上边的ref=‘child’是对应的。这样就可以获取到这整个虚拟dom,就可以对其中的任意一个属性操作。

组件之间的操作只有存在于父子组件才能用this.parent和父节点取到整个子节点的用法一样,this.parent 和父节点取到整个子节点的用法一样,this.parentthis.parent.title,可以获取到父节点中的title值。

兄弟之间的值的相互获取

用到了emit和emit和emiton
在传值的时候需要给传值的dom节点添加点击事件@click=‘send()’,当然这个函数是不唯一的,
在send中用(vm.emit(′aa′,this.title)),aa也不是唯一的,vm是为了传递数据的时候有一个相同的量来进行调用,事先声明letvm=newVue()−−−−−在接受的虚拟dom中要用vm.emit('aa',this.title)),aa也不是唯一的,vm是为了传递数据的时候有一个相同的量来进行调用,事先声明 let vm=new Vue({})-----在接受的虚拟dom中要用vm.emit(aa,this.title),aavm,letvm=newVue()domvm.on(‘aa’,(msg)={}),其中要注意到aa也不是唯一的值,但是要和上方传递过来的值一样,这样就能获取到其他组件传递过来的值了。

父子之间的组件操作

在<v-child @toparent=‘tap’>,tap为组件中的函数,这里不加()是为了可以在父元素中直接用tap(msg)中的msg来得到返回的数据,如果在上方用tap()这样的形式,则需要在()中添加一个实参event,也就是tap(event,也就是tap(eventtapevent)
发送的数据,需要在子组件中写入;this.$emit(‘toparent’,this.title)其中前边的toparent要和<v-child @toparent=‘tap’>中的@toparent一致。

评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值