vue 组件传递值以及获取DOM元素的位置信息
Posted whitewen
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 <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元素的位置信息的主要内容,如果未能解决你的问题,请参考以下文章