vue使用ref操作DOM元素

<!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.js"></script>
</head>

<body>
  <div id="app">
    <!-- 子组件 -->
    <com1 ref="zizujian"></com1>
  父组件
    <h2 id="mes" ref="message">父组件的内容</h2>
    <input type="button" value="获取页面中的信息" @click="getdominfo" ref="anniu">
  </div>
  <template id="cont1">
    <div>
      子组件
    </div>
  </template>
  <script>

    var vm = new Vue({
      el: "#app",
      data: {},
      methods: {
        //  以前想要获取页面中的dom元素,我们可以使用document.getElementById('mes').innerText获取dom内容
        // getdominfo() {
        //   console.log(document.getElementById('mes').innerText)
        // }

        //但是vue不建议直接操作dom元素,所以可以使用ref进行操作,ref是vm实例的属性,在控制台,我们输入vm就可以看到vm身上的相关属性
当我们在页面中添加ref属性后,在控制台输出如下图:
        
 
//我们将页面元素中添加ref属性,即可在控制台看到
        // 页面中要写ref   不能添加s,因为我们是对单个h2进行操作的
        getdominfo() {
          // 输出时,我们要使用this.$refs ,这里的要添加refs,因为我们的页面中可能有多个ref
          console.log(this.$refs.message.innerText)

          //获取子组件的dom
          console.log(this.$refs.zizujian.mess) //获取子组件的data数据
          this.$refs.zizujian.show() //获取子组件的方法
        }
      },
      components: {
        com1: {
          template: "#cont1",
          data() {
            return {
              mess: "子组件中的数据"
            }
          },
          methods: {
            show() {
              console.log("子组件的方法")
            }
          },
        }
      }
    })
  </script>
</body>

</html>
posted @ 2020-01-12 15:46  小码农一个  阅读(...)  评论(...编辑  收藏