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

<template>
     <div class="home">
         <child ref="refName"> </child>   
     </div>
 </template> 
 <script>
 　　import child from '@/views/modules/contacts/index/child';
     export default {
          components: {child},
          data(){
              return{
                  keywordValue:'',
                  id:'',
                  title:'',
              }
         },
          created(){
  
         },
          mounted(){
 
        
          },
          methods:{
             getcontacts() {
                 const childData = this.$refs.refName;
                 console.log(childData.title);//测试
　　　　　　　　　　　childData.test();//测试方法
               
             },
         }
   }
  </script> 

child.vue

<template>
    <div class="app-container">
　　　　.......
　　</div>                 
</template>

<style src="@/styles/contacts/right.scss"></style>

<script>

    export default {
        name: 'child',
        data (){
            return{
                id:'',
                title:'测试',
                type:'',
                isShow:false, //筛选显示隐藏
                listLoading:false,
                dialogVisible3:false,
                message: '',//操作提示框信息
                sels: [],//选中的值显示,用于批量删除
                signupLoading: false,//成员列表加载中
                contactsList: [],//成员列表数据

            }
        },
        components: {
            .......
        },
        mounted(){
　　　　    ......
        },
        methods:{
            test(){  
                console.log('测试方法');
            },
        }
    }
</script>

 

未完待续。。。。。。。

相关资料：https://segmentfault.com/q/1010000008849899?_ea=1756967