博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vue2.0中父子,兄弟组件的传值2
阅读量:6823 次
发布时间:2019-06-26

本文共 697 字,大约阅读时间需要 2 分钟。

问题描述:在父组件a中有b,c两个子组件,b组件想使用c组件的dom元素

解决方法:通过其父组件进行传值

1、在c组件中使用this.$emit方法将event.target传给父组件a

c子组件代码

methods: { addcar(event) { this.$emit('addCart',event.target);//触发addCart方法,event.target为向父组件传递的数据 }}复制代码

2、在父组件a中监听子组件触发的addCart事件,然后调用addcart方法,再使用this.$refs来引用子组件b,进而调用其drop方法。

父组件a代码

//监听子组件触发的addCart事件,然后调用addcart方法
methods: { addcart(target) { this._drop(target); }, _drop(target) { this.$refs.b.drop(target);//调用子组件b中的drop方法 }}复制代码

3、在子组件中定义一个drop方法使用target

子组件b的代码

methods: {    drop(el) {    //此el就是c组件中的dom元素div        console.log(el);    }}复制代码

最后就能在子组件c中使用target

转载于:https://juejin.im/post/5acada6cf265da2386702e3d

你可能感兴趣的文章
Laravel Telescope入门教程(上)
查看>>
Linux配置ip 及网络问题排查
查看>>
AndroidStudio用Cmake方式编译NDK代码(cmake配置.a库)
查看>>
OSChina 周四乱弹 ——黑丝短裙java程序员同事
查看>>
设置iptables之后不能正常访问ftp解决方法
查看>>
移动端rem布局
查看>>
jsp与iframe跨域访问的一个方法
查看>>
ViewPager + Fragment 取消预加载
查看>>
BigDecimal 02 - 注意事项
查看>>
用js玩桌球游戏
查看>>
maven下运行jetty报错
查看>>
android 配置framework 使应用首选安装在SD卡
查看>>
h5 点击表单 顶部fixed 菜单栏 上移
查看>>
windows 2008 R2 64位系统杀毒软件
查看>>
我的友情链接
查看>>
netty学习笔记
查看>>
更改win7文件类型默认操作
查看>>
我的友情链接
查看>>
我的友情链接
查看>>
Webgoat 笔记总结 Web Services
查看>>