vue—ref属性

原文链接：vue—ref属性 – 每天进步一点点

 

在vue中ref属性基本有两个作用，一个是获取dom元素，另一个是获取组件实例化对象。

初始页面和初始代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36

<template>   <div id="app">     <img alt="Vue logo" src="./assets/logo.png">     <h1 v-text="msg"></h1>     <Student></Student>   </div> </template>   <script>   import Student from './components/Student'   export default {   name: 'App',   components: {         Student   },   data() {     return {       msg:'欢迎'     }   }, } </script>   <style> #app {   font-family: Avenir, Helvetica, Arial, sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-align: center;   color: #2c3e50;   margin-top: 60px; } </style>

1.获取dom元素

获取dom元素的方法很简单，比如我们可以用最原始的 方法获取dom

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<template>   <div id="app">     <img alt="Vue logo" src="./assets/logo.png">     <h1 v-text="msg" id='h1'></h1>     <button @click="showDom">点击我输出dom元素</button>     <Student></Student>   </div> </template>   <script>   import Student from './components/Student'   export default {   name: 'App',   components: {         Student   },   data() {     return {       msg:'欢迎'     }   },   methods: {     showDom(){       console.log(document.getElementById('h1'))     }   }, } </script>   <style> #app {   font-family: Avenir, Helvetica, Arial, sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-align: center;   color: #2c3e50;   margin-top: 60px; } </style>

这种最原始的方法可以将dom元素输出。

我们也可以用ref的方法进行操作，这是vue给我们提供的方法

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<template>   <div id="app">     <img alt="Vue logo" src="./assets/logo.png">     <h1 v-text="msg" ref="h1"></h1>     <button @click="showDom">点击我输出dom元素</button>     <Student></Student>   </div> </template>   <script>   import Student from './components/Student'   export default {   name: 'App',   components: {         Student   },   data() {     return {       msg:'欢迎'     }   },   methods: {     showDom(){       console.log(this.$refs.h1)     }   }, } </script>   <style> #app {   font-family: Avenir, Helvetica, Arial, sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-align: center;   color: #2c3e50;   margin-top: 60px; } </style>

2.获取组件实例对象

我们除了可以操作现有的标签，还可以操作我们自己创建的组件，比如上一篇文章创建的student组件，

我们将ref 属性加入到这个组件中，就可以输出整个组件的实例对象了，这个在后面的组件之间的通信有作用。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

<template>   <div id="app">     <img alt="Vue logo" src="./assets/logo.png">     <h1 v-text="msg" ref="h1"></h1>     <button @click="showDom">点击我输出dom元素</button>     <Student ref="stu"></Student>   </div> </template>   <script>   import Student from './components/Student'   export default {   name: 'App',   components: {         Student   },   data() {     return {       msg:'欢迎'     }   },   methods: {     showDom(){       console.log(this.$refs.stu)     }   }, } </script>   <style> #app {   font-family: Avenir, Helvetica, Arial, sans-serif;   -webkit-font-smoothing: antialiased;   -moz-osx-font-smoothing: grayscale;   text-align: center;   color: #2c3e50;   margin-top: 60px; } </style>