【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