vue 组件传递值以及获取DOM元素的位置信息

1.父组件 select_li.vue

1.1 父组件模板

1 <template>
2     <div id='selectLi' ref="selectLi">
3         <div class="sort" @click="choose">
4             <span>{
     {name}}span>
5             <img class="icon_arrow" :src="src">
6         div>
7     <mask_li v-bind:showMaskBox="showMaskBox" :lists="lists" @closeChild="updataMaskStatus">mask_li>
8     div>
9 template>

1.2 父组件js

 1 

2.子组件 mask_li.vue

1 <template>
2     <div id='maskLi' v-show="showMask">
3         {
      {showMask}}
4         <div class="mask" @click="closeMaskLi">div>
5         <ul class="choose_box">
6             <li class="online" :class="{'active':showOn===key}" v-for="(list,key) in lists" :key="key" @click="chooseCurrent(key)"><span>{
     {list.name}}span><span v-show="showOn===key">√span>li>
7         ul>
8     div>
9 template>

 1 

 

3. 获取dom元素的位置信息

this.$refs['通过设置ref获取到的dom元素'].getBoundingClientRect();

//示例: 获取元素距离顶部的距离

1 this.$refs.selectLi.getBoundingClientRect().top

3.1 父组件给子组件传值

　　在父组件中:使用绑定属性的方式将要传递的值传递给子组件