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

未完待续。。。。。。。

巴特西

【vue】vue中ref用法

最新文章

热门文章