【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>