Vue前端框架中必不可少的属性 |
您所在的位置：网站首页 › vue的ref属性加变量 › Vue前端框架中必不可少的属性 |
|
1、Vue中的ref 和$refs的区别
ref
以标签属性 的形式存在，接收String参数。 ref 被用来给元素或者子组件注册引用信息， 分为两种情况： 1、如果在普通的DOM元素上使用，引用指向的就是真实的DOM元素 2、如果用在子组件上，引用则指向的是组件实例对象 $refs以对象的方式存在，表示持有ref属性的所有组件 该对象对应着ref属性： 1、如果ref是在普通的标签上，则$ref指向的就是该DOM元素 2、如果ref是在子组件上，则指向的是该组件的实例对象。 2、使用 代码演示 展示input中的数据 name:'show', methods:{ show(){ alert(this.$refs.input.value); //得到this.$refs对象中input标识符所在的标签实例对象，并输出标签的value值 } }, 结果：输入框输入：这是ref的使用演示 点击按钮后输出：这是ref的使用演示 3、ref结合v-for的特殊使用v-for用于遍历数组或者对象，标签只用写一次，大大的简化的代码的冗余 {{item}}但是，由于动态的遍历标签，所以就无法拿到指定的标签，这里ref有起到的不可代替的作用 代码 {{item}} 显示数据 name:'show', data(){ return{ array:['包子','馒头','油条','豆浆','牛奶','面包'], //需要遍历显示的内容，用数组的形式存放 } }, methods:{ getli(index){ let li = this.$refs.li; //得到$refs对象中所有的li标识符所在的标签实例对象 //此时的局部变量li为一个数组，存放的是所有的li标签实例对象 alert(li[index].innerText);//取得指定的li对象，输入内部的值 } }, 4、总结 this.$refs.tagName 等同于 document.getElementsByClass('className');$refs只在组件渲染完成后才填充，并且它并非响应式，它只是一个直接操作标签或者组件的应急方案，我们应该在开发中尽量少的使用它 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |