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

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的三种常用传值方式、父传子、子传父、非父子组件传值

巴特西