Vue中ref属性

利用ref属性，可以获取到DOM元素或者是子组件，从而可以调用子组件方法1.当ref属性直接定义在dom元素上，则通过this.$ref.name可以直接获取到dom，对dom直接进行操作；1<div class="foods-wrapper" ref="foods-wrapper">注意：ref的属性命名不能用驼峰（即不能中间为

努力_才幸福

2914人浏览 · 2018-05-30 15:48:42

努力_才幸福 · 2018-05-30 15:48:42 发布

利用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();//同时也可以调用子组件中的属性

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^