1.父组件select_li.vue

1.1父组件模板

Template

Div id='selectLi' ref='selectLi '

Div类=' sort' @ click=' choose '

Span{{name}}/span

imgclass=' icon _ arrow ' : src=' src '

/div

mask _ Li v-bind : show maskbox=' show maskbox ' : lists=' lists ' @ close child=' updatamaskstatutute

/div

/template

1.2程序集js

脚本(脚本)

Import ElementUI from 'element-ui '

Importmask _ Li from '。/mask _ li.vue'//导入子组件

Export default({

数据(){

Return{

Name:“过滤器”，

SRC : REQUIRE(’././././assets/images/icon _ arrow _ 1 . png ')，//

ShowMaskBox:false，

塔：0，

Lists:[

{

名字：“电子信息”，

}，

{

Name:“组筛选”，

}

]。

}

}，

Components: {

Mask_li //新名称委员会组件

}，

Methods:{

Choose:choose，

updatamaskstatus 3360 updatamaskstatus

}，

Mounted(){

Console.log (this .$ refs . selectli . getboundingclientrect())

//节点装载后导入DOM元素

This.totop=this。$ refs . select Li . getboundingclientrect()。top

}

})。

Function choose () {

This.showMaskBox=！This.showMaskBox

}

function updatamaskstatus(data){

This.showMaskBox=data

}

/脚本

2.子组件mask_li.vue

Template

Div id='maskLi' v-show='showMask '

{{showMask}}

Div类=' mask ' @ click=' closemaskli '/div

Ul class='choose_box '

Li class=' online ' : class=' { ' active ' : show on==key } ' v-for='(list，key

/ul

/div

/template

脚本(脚本)

Export default ({

props 3360[

使用“ShowMaskBox”、//props接收来自父组件的showMaskBox和lists

“列表”

]，

数据(){

Return{

show on :0，

ShowMask:false

}

}，

Methods:{

choose current : choose current，//将点击事件添加到循环列表-单击此处更改样式

关闭closemaskli 3360 closemaskli//遮罩层，并将值传递给父组件，以更改父组件传递的showMaskBox值

}，

瓦齐3360 {

当“//showMaskBox”更改时，将执行此函数

showmaskbox 3360 function(){

This.showMask=this.showMaskBox

}

}

})。

Function choose current(索引){

This.showOn=index

}

Function closeMaskLi () {

This.showMask=false

//closeChild是从父组件on接收的方法

//第二个参数this.showMask是需要传递的值

This。$ emit(“closechild”，this.showmask)

}

/脚本

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

This。$ refs[‘通过ref设置获得的DOM元素’]。getBoundingClientRect()；

//是获取到：元素顶部的距离

1this.$ refs . selectli . getboundingclientrect()。top

3.1父组件将值传递给子组件

在父组件中，使用：绑定属性将要传递的值传递给子组件

Template

迪夫

Input type='text'/

mask _ Li v-bind : show maskbox=' show maskbox ' : lists=' lists ' @ close child=' updatamaskstatutute

/div

/tempate

在子组件内：使用props从父组件接收值。有关详细信息，请参阅2的js部分

3.2子组件将值传递给父组件

在子组件中，在父组件中

单击Div.mask后，调用closeMaskLi()函数定义事件- closeChild，值-this . show mask；传递。父组件接收closeChild事件后，执行相应的操作。更新传递给子组件的showMaskBox值。

Template

Div id='maskLi' v-show='showMask '

{{showMask}}

Div类=' mask ' @ click=' closemaskli '/div

Ul class='choose_box '

Li class=' online ' : class=' { ' active ' : show on==key } ' v-for='(list，key

/ul

/div

/template