vue

vue中$refs的基本用法

2019-11-18  本文已影响0人  七分热度丶

1、ref 加在普通的元素上,用this.$refs.(ref的值) 获取到的是dom元素

<div id="app">
    <div ref="haha">这是div</div>
 
    <button @click="getref">获取H1元素</button>
</div>

methods: {
        getref() {
           console.log(this.$refs.haha.innerText);// 表示从 $refs对象 中, 获取 ref 属性值为haha的DOM元素
           this.$refs.haha.style.color = 'green';// 修改html样式
        }
      }

2、ref 加在子组件上,用this.refs.(ref值) 获取到的是组件实例,可以使用组件的所有方法。在使用方法的时候直接this.refs.(ref的值).方法() 就可以使用了。

父组件

<template>
  <div>
    <button @click="clickParent">点击</button>
    <child ref="mychild"></child>
  </div>
</template>

<script>
  import Child from "./child";
  export default {
    name: "parent",
    components: {
      child: Child
    },
    methods: {
      clickParent() {
        this.$refs.mychild.parentHandleclick("嘿哈嘿"); // 划重点!!!!
      }
    }
  };
</script>

子组件

<template>
  <div>
    child
  </div>
</template>

<script>
  export default {
    name: "child",
    props: "someprops",
    methods: {
      parentHandleclick(e) {
        console.log(e);
      }
    }
  };
</script>

3、如何利用 v-for 和 ref 获取一组数组或者dom 节点

ref 是循环出来的,有多个重名,那么ref的值会是一个数组 ,此时要拿到单个的ref 只需要循环就可以了。

上一篇下一篇

猜你喜欢

热点阅读