vue中的refs

206 阅读1分钟

$refs

<h1 ref="h1Ele">这是H1</h1>

<hello ref="ho"></hello>


<button @click="getref">获取H1元素</button>

methods: {

    getref() {
    
      // 表示从 $refs对象 中, 获取 ref 属性值为: h1ele DOM元素或组件
      
       console.log(this.$refs.h1Ele.innerText);
       
       this.$refs.h1ele.style.color = 'red';// 修改html样式
       

      console.log(this.$refs.ho.msg);// 获取组件数据
      
      console.log(this.$refs.ho.test);// 获取组件的方法
    }

}

注:refs就相当于获取DOM节点