Vue2中ref屬性的用法

最近寫東西遇到了莫名其妙的問題，用ref屬性原以為它會獲得一個數組http://www.jianshu.com/p/05c863ec2a23

1. // html

2. <ul>

3. 　　<li ref="refCon">1</li>

4. 　　<li ref="refCon">2</li>

5. </ul>

1. // js

2. created: function() {

3. 　　this.$nextTick(() => {

4. 　　　　console.log(this.$refs.refCon)

5. 　　　　// 列印結果：<li>2</li> 本以為會獲得一個數組

6. 　　 })

7. }

後來去看了下文件才搞明白orz。（沒仔細看文件的鍋

js01.png

這下就明白了

1. // html

2. <ul>

3. <li v-for="item in people" ref="refContent">{{item}}</li>

4. </ul>

1. // js

2. data: {

3. people:['三姑','四嬸','五叔','六姨','七舅姥爺']

4. },

5. created: function() {

6. this.$nextTick(() => {

7. console.log(this.$refs.refContent)

8. })

9. }

js02.png

以及一定要注意

1. // js

2. data: {

3. people:['三姑','四嬸','五叔','六姨','七舅姥爺']

4. },

5. created: function() {

6. console.log(this.$refs.refContent)

7. // undefined

8. }

1. <div id="app">

2. <navbar></navbar>

3. <pagefooter></pagefooter>

4. </div>

1. Vue.component('navbar',{

2. template:'#navbar',

3. data:function () {

4. return {

5. navs:[]

6. }

7. }

8. });

9.  

10. Vue.component('pagefooter',{

11. template:'#pagefooter',

12. data:function () {

13. return {

14. footer:''

15. }

16. }

17. });

18. new Vue({

19. el:'#app',

20. mounted:function () {

21. //ready,

22. //這裡怎麼直接訪問navbar的navs和pagefooter的footer值呢，

23. }

24. })

這就用到ref了

修改元件

1. <div id="app">

2. <navbar ref="navbar"></navbar>

3. <pagefooter ref="pagefooter"></pagefooter>

4. </div>

1. new Vue({

2. el:'#app',

3. mounted:function () {

4. //ready,

5. //這裡怎麼直接訪問navbar的navs和pagefooter的footer值呢，

6. console.log(this.$refs.navbar.navs);

7. console.log(this.$refs.pagefooter.footer);

8. }

9. })

如果僅僅用到一個普通標籤上

<div ref="demo"></div>

他的作用和：

document.querySelector('[ref=demo]');

的作用一樣