【vue】vue中ref用法

1.獲取當前元素：

例子：

<div class="pop pos-a" :style="{ left: pop_x + 'px' ,top: pop_y + 'px'}"  ref="refName">
    <ul>
        <li>編輯部門</li>
        <li @click="append()">添加子部門</li>
    </ul>
</div>    

使用：this.$refs.refName

2.應用場景：父組件（home.vue）中使用子組件（child.vue）中定義的 export default {.......}中的屬性等。

例子：

home.vue中

 1 <template>
 2      <div class="home">
 3          <child ref="refName"> </child>   
 4      </div>
 5  </template> 
 6  <script>
 7  　　import child from '@/views/modules/contacts/index/child';
 8      export default {
 9           components: {child},
10           data(){
11               return{
12                   keywordValue:'',
13                   id:'',
14                   title:'',
15               }
16          },
17           created(){
18   
19          },
20           mounted(){
21  
22         
23           },
24           methods:{
25              getcontacts() {
26                  const childData = this.$refs.refName;
27                  console.log(childData.title);//測試
28 　　　　　　　　　　　childData.test();//測試方法
29                
30              },
31          }
32    }
33   </script> 

 

child.vue

 1 <template>
 2     <div class="app-container">
 3 　　　　.......
 4 　　</div>                 
 5 </template>
 6 
 7 <style src="@/styles/contacts/right.scss"></style>
 8 
 9 <script>
10 
11     export default {
12         name: 'child',
13         data (){
14             return{
15                 id:'',
16                 title:'測試',
17                 type:'',
18                 isShow:false, //篩選顯示隱藏
19                 listLoading:false,
20                 dialogVisible3:false,
21                 message: '',//操做提示框信息
22                 sels: [],//選中的值顯示,用於批量刪除
23                 signupLoading: false,//成員列表加載中
24                 contactsList: [],//成員列表數據
25 
26             }
27         },
28         components: {
29             .......
30         },
31         mounted(){
32 　　　　    ......
33         },
34         methods:{
35             test(){  
36                 console.log('測試方法');
37             },
38         }
39     }
40 </script>

 

未完待續。。。。。。。

 

 

相關資料：https://segmentfault.com/q/1010000008849899?_ea=1756967