1.父组件 select_li.vue
1.1 父组件模板
<template>
<div id='selectLi' ref="selectLi">
<div class="sort" @click="choose">
<span>{{name}}</span>
<img class="icon_arrow" :src="src">
</div>
<mask_li v-bind:showMaskBox="showMaskBox" :lists="lists" @closeChild="updataMaskStatus"></mask_li>
</div>
</template>
1.2 父组件js
<script>
import ElementUI from 'element-ui'
import mask_li from './mask_li.vue' // 导入子组件
export default({
data(){
return{
name:'筛选',
src: require('../../../../../assets/images/icon_arrow_1.png'), // 引入图片资源
showMaskBox:false,
toTop:0,
lists:[
{
name:'电子知情',
},
{
name:'筛选入组',
}
]
}
},
components: {
mask_li // 申明子组件
},
methods:{
choose:choose,
updataMaskStatus:updataMaskStatus
},
mounted(){
console.log(this.$refs.selectLi.getBoundingClientRect())
// 在节点挂载之后，获取dom元素
this.toTop = this.$refs.selectLi.getBoundingClientRect().top
}
}) function choose () {
this.showMaskBox=!this.showMaskBox;
}
function updataMaskStatus (data) {
this.showMaskBox = data
} </script>
2.子组件 mask_li.vue
<template>
<div id='maskLi' v-show="showMask">
{{showMask}}
<div class="mask" @click="closeMaskLi"></div>
<ul class="choose_box">
<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>
</ul>
</div>
</template>
<script>
export default ({
props: [
'showMaskBox', // 使用props接收父组件传来的 showMaskBox 以及lists
'lists'
],
data(){
return{
showOn:0,
showMask:false
}
},
methods:{
chooseCurrent:chooseCurrent, // 为循环的列表添加点击事件---点击这个改变样式
closeMaskLi:closeMaskLi // 关闭遮罩层，并向父组件传值，更改父组件传递的showMaskBox的值
},
watch: {
// 如果 `showMaskBox` 发生改变，这个函数就会运行
showMaskBox: function () {
this.showMask = this.showMaskBox
}
}
}) function chooseCurrent (index) {
this.showOn = index;
}
function closeMaskLi () {
this.showMask = false;
// closeChild是在父组件on监听的方法
// 第二个参数this.showMask是需要传的值
this.$emit('closeChild', this.showMask)
}
</script>
3. 获取dom元素的位置信息
this.$refs['通过设置ref获取到的dom元素'].getBoundingClientRect();
//示例: 获取元素距离顶部的距离
1 this.$refs.selectLi.getBoundingClientRect().top
3.1 父组件给子组件传值
在父组件中:使用绑定属性的方式将要传递的值传递给子组件
<template>
<div>
<input type='text' />
<mask_li v-bind:showMaskBox="showMaskBox" :lists="lists" @closeChild="updataMaskStatus"></mask_li>
</div>
</tempate>
在子组件中：使用props接收父组件传来的值。详细见2中js部分
3.2子组件给父组件传值
在子组件中给父组件
在点击 div.mask 的时候，调用closeMaskLi() 函数，定义一个事件--closeChild，并传一个值--this.showMask；父组件在监听closeChild事件后执行相应操作--更新传给子组件的showMaskBox值；
<template>
<div id='maskLi' v-show="showMask">
{{showMask}}
<div class="mask" @click="closeMaskLi"></div>
<ul class="choose_box">
<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>
</ul>
</div>
</template>
有关页面传值，参考 Vue2.0的三种常用传值方式、父传子、子传父、非父子组件传值