首页 > 上网技巧 > 电脑小技巧 > vue 组件传递值以及获取DOM元素的位置信息

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

时间:2021-08-21 17:40 作者:QQ地带 我要评论

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>

标签: vue
顶一下
(0)
0%
踩一下
(0)
0%

Google提供的广告