Vue 获取DOM元素ref

Posted wanguofeng

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 获取DOM元素ref相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/vue-2.4.0.js"></script>
</head>

<body>
  <div id="app">
    <input type="button" value="获取元素" @click="getElement" ref="mybtn">
    <!-- 这里ref是设置要获取的dom元素 -->
    <h3 id="myh3" ref="my">哈哈哈, 今天天气太好了!!!</h3>
    <hr>
    <login ref="mylogin"></login>
  </div>

  <script>

    var login = 
      template: <h1>登录组件</h1>,
      data() 
        return 
          msg: son msg
        
      ,
      methods: 
        show() 
          console.log(调用了子组件的方法)
        
      
    

    // 创建 Vue 实例,得到 ViewModel
    var vm = new Vue(
      el: #app,
      data: ,
      methods: 
        getElement() 
          // console.log(document.getElementById(‘myh3‘).innerText)
          //  ref  是 英文单词 【reference】   值类型 和 引用类型  referenceError
          //注意用$refs 获取的原生的DOM对象
          console.log(this.$refs.my.innerText)
          console.log(this.$refs.mylogin.msg)
          this.$refs.mylogin.show()
        
      ,
      components: 
        login
      
    );
  </script>
</body>

</html>

 

以上是关于Vue 获取DOM元素ref的主要内容,如果未能解决你的问题,请参考以下文章

vue操作dom元素

ref 引用(vue获取DOM元素)

Vue 获取DOM元素ref

Vue3 form表单通过ref获取dom的写法

vue操作dom

13-Vue特殊属性-ref