微信扫一扫打赏支持

VUE参考---ref获取组件

VUE参考---ref获取组件

一、总结

一句话总结：

ref属性可以给组件使用，获取的组件可以调用组件的方法，比如 this.$refs.mylogin.show()
  <div id="app">
    <input type="button" value="获取元素" @click="getElement" ref="mybtn">

    <h3 id="myh3" ref="myh3">哈哈哈， 今天天气太好了！！！</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
          // console.log(this.$refs.myh3.innerText)

          // console.log(this.$refs.mylogin.msg)
          // this.$refs.mylogin.show()
        }
      },
      components: {
        login
      }
    });
  </script>

 

 

二、ref获取组件

博客对应课程的视频位置：

 

 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5   <meta charset="UTF-8">
 6   <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7   <meta http-equiv="X-UA-Compatible" content="ie=edge">
 8   <title>Document</title>
 9   <script src="./lib/vue-2.4.0.js"></script>
10 </head>
11 
12 <body>
13   <div id="app">
14     <input type="button" value="获取元素" @click="getElement" ref="mybtn">
15 
16     <h3 id="myh3" ref="myh3">哈哈哈， 今天天气太好了！！！</h3>
17 
18     <hr>
19 
20     <login ref="mylogin"></login>
21   </div>
22 
23   <script>
24 
25     var login = {
26       template: '<h1>登录组件</h1>',
27       data() {
28         return {
29           msg: 'son msg'
30         }
31       },
32       methods: {
33         show() {
34           console.log('调用了子组件的方法')
35         }
36       }
37     }
38 
39     // 创建 Vue 实例，得到 ViewModel
40     var vm = new Vue({
41       el: '#app',
42       data: {},
43       methods: {
44         getElement() {
45           // console.log(document.getElementById('myh3').innerText)
46 
47           //  ref  是 英文单词 【reference】   值类型 和 引用类型  referenceError
48           // console.log(this.$refs.myh3.innerText)
49 
50           // console.log(this.$refs.mylogin.msg)
51           // this.$refs.mylogin.show()
52         }
53       },
54       components: {
55         login
56       }
57     });
58   </script>
59 </body>
60 
61 </html>

 

 

 

 
posted @ 2020-04-23 12:04  范仁义  阅读(305)  评论(0)    收藏  举报