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 <script>
 2   import ElementUI from ‘element-ui‘
 3     import mask_li from ‘./mask_li.vue‘ // 導入子組件
 4     export default({
 5         data(){
 6             return
 
{
 7                 name:‘篩選‘,
 8                 src: require(‘../../../../../assets/images/icon_arrow_1.png‘), // 引入圖片資源
 9                 showMaskBox:false,
10                 toTop:0,
11                 lists:[
12                     {
13                         name:‘電子知情‘,
14                     },
15                     {
 
16                         name:‘篩選入組‘,
17                     }
18                 ]
19             }
20         },
21     components: {
22       mask_li // 申明子組件
23     },
24         methods:{
25             choose:choose,
26             updataMaskStatus:updataMaskStatus
27         },
28         mounted(){
29             console.log(this.$refs.selectLi.getBoundingClientRect())
30             // 在節點掛載之後，獲取dom元素
31             this.toTop = this.$refs.selectLi.getBoundingClientRect().top
32         }
33     })
34     
35     function choose () {
36         this.showMaskBox=!this.showMaskBox;
37     }
38     function updataMaskStatus (data) {
39         this.showMaskBox = data
40     }
41     
42 </script>

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 <script>
 2   export default ({
 3     props: [
 4             ‘showMaskBox‘, // 使用props接收父組件傳來的 showMaskBox 以及lists
 5             ‘lists‘
 6     ],
 7         data(){
 8             return{
 9                 showOn:0,
10                 showMask:false
11             }
12         },
13         methods:{
14             chooseCurrent:chooseCurrent, // 為循環的列表添加點擊事件---點擊這個改變樣式
15             closeMaskLi:closeMaskLi // 關閉遮罩層，並向父組件傳值，更改父組件傳遞的showMaskBox的值
16         },
17         watch: {
18             // 如果 `showMaskBox` 發生改變，這個函數就會運行
19             showMaskBox: function () {
20                 this.showMask = this.showMaskBox
21             }
22         }
23   })
24     
25     function chooseCurrent (index) {
26         this.showOn = index;
27     }
28     function closeMaskLi () {
29         this.showMask = false;
30         // closeChild是在父組件on監聽的方法
31         // 第二個參數this.showMask是需要傳的值
32         this.$emit(‘closeChild‘, this.showMask)
33     }
34 </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值；

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>

有關頁面傳值，參考 Vue2.0的三種常用傳值方式、父傳子、子傳父、非父子組件傳值

vue 組件傳遞值以及獲取DOM元素的位置信息