黑马程序员技术交流社区

标题: 【上海校区】Vue中ref属性 [打印本页]

---

作者: 不二晨    时间: 2019-4-15 10:21
标题: 【上海校区】Vue中ref属性
利用ref属性，可以获取到DOM元素或者是子组件，从而可以调用子组件方法

1.当ref属性直接定义在dom元素上，则通过this.$ref.name可以直接获取到dom，对dom直接进行操作；

1
<div class="foods-wrapper" ref="foods-wrapper">
注意：ref的属性命名不能用驼峰（即不能中间为大写字母）

let menuList=this.$refs['menu-wrapper'].getElementsByClassName('menu-list-hook');//此处如果用this.$refs["menuWrapper"]将获取不到元素

2.通过在引用的子组件上使用ref属性实现父组件调用子组件的方法及属性

在父组件中引用子组件并定义ref

<v-food  ref="selectfood"></v-food>

调用定义在子组件中的方法show

this.$refs.selectfood.show();//同时也可以调用子组件中的属性




---------------------
【转载，仅作分享，侵删】
作者：努力_才幸福
原文：https://blog.csdn.net/weixin_38098192/article/details/80510971
版权声明：本文为博主原创文章，转载请附上博文链接！

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2