Vue2中ref属性的用法

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]');

的作用一样