vue中，根据屏幕不同设置子组件的高度，ref、$refs、props

最新推荐文章于 2024-08-16 23:30:51 发布
最新推荐文章于 2024-08-16 23:30:51 发布
阅读量5.6k 收藏 4
点赞数 5
分类专栏： Vue 文章标签： vue mint-ui 移动端商城
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/i_ViOLeT_i/article/details/90482488
版权

现在有一个需求：中间子组件的高度要固定，并且由设备的高度（不同设备高度不同）和父组件头部和尾部决定
需求来源：用vue做移动端商城，使用mint-ui时，使用上拉下拉刷新加载功能时要固定容器高度，不然会被元素无线撑大，会导致不管什么时候直接拉动都会进行加载
本文用以记录实现这个需求的方法
知识点：用ref获取dom元素、$refs获取用 ref 注册过的所有 dom元素、通过props来父传子通信

用图解释：
在这里插入图片描述
思路：
1、先获取父组件的头部和尾部dom元素，传给中间的子组件
2、子组件获取父组件传递的数据
3、容器高度=获取设备高度（document.body.clientHeight）-父组件的头部高度-父组件的尾部高度
父组件的头部高度：this.apprefs.header.$ el.offsetHeight
父组件的尾部高度：this.apprefs.footer.$el.offsetHeight
4、给容器设置高度
代码如下：
在这里插入图片描述
created中操作数据，mounted中操作dom

i_ViOLeT_i
关注
专栏目录
vue中使用$emit子组件给父组件传参以及使用ref和$refs父组件调用子组件方法
蔡姐的博客
01-18 1564
1.子组件不传递参数，父组件也不接受参数 // 子组件 <template> <div> <jc-button @click="testEmit">click</jc-button> </div> </template> <script> export default { name: 'Children', components: {}, props: {}, data() { ret
vue父子组件传值：props,$ref和$emit
weixin_47863547的博客
04-13 1146
一.props实现通信 父组件向子组件传值，子组件的props选项能够接收来自父组件数据。props仅仅只能接收，props是单向绑定的，即只能父组件向子组件传递，不能反向。而传递的方式也分为两种：静态传值和动态传值 1.静态传值 示例： 父组件是App.vue ,子组件是Head.vue App.vue 父组件: <template> <div id="app"> <v-head msg='标题'></v-head> </div>
通过ref使元素动态高度
Jk200165的博客
07-28 649
【代码】通过ref使元素动态高度。
vue获取元素高度，设置元素高度
qq_38935512的博客
11-04 5740
获取滚动记录 this.scrollTop = this.$refs["scroll"].pageYOffset || this.$refs["scroll"].scrollTop || this.$refs["scroll"].scrollTop; 设置滚动距离 // this.$nextTick(re => {
Vue中调整组件的高度及其他样式
最新发布
weixin_73378557的博客
08-16 407
请注意，具体的实现方法可能需要根据你的具体布局和样式需求来调整。变长，你可以使用CSS来调整它的高度。根据内容自动调整高度，确保它内部没有固定高度的元素，或者使用。：如果你需要根据Vue组件的状态来动态调整高度，可以使用。：如果你的布局使用的是CSS Grid，你可以设置。至少有某个高度，但是又不超过某个最大高度，可以使用。是在一个flex容器中，你可以设置它的。在Vue组件中，如果想让一个组件如。所在的行或列来占据更多空间。属性来让它占据更多的空间。然后在你的Vue实例的。属性来处理溢出的内容。
第二十七篇：this.$refs改变dom元素高度
maliyao4233的博客
09-14 999
列表高度百分之40%，点击的时候高度百分百。百分百要是字符串格式。
Vue 通过组件的ref获取元素的高度。
u012632105的博客
09-12 6221
属性获取组件的 DOM 元素。获取 DOM 元素之后，可以通过。属性获取了它的高度。最后，我们将获取到的高度打印到控制台中。属性获取元素的高度。在上面的代码中，我们首先定义了一个。方法会被调用，它会打印出。在 Vue 中，可以通过。当我们点击页面中的按钮时，
react中父组件调用子组件的方法
weixin_30526593的博客
03-11 1022
1.直接使用ref进行获取 　　 import React, {Component} from 'react'; export default class Parent extends Component { render() { return( <div> <Child onR...
vue 父组件通过$refs获取子组件的值和方法详解
10-16
在父组件中，我们可以通过 `ref` 属性为子组件创建一个引用，然后在父组件的方法中通过 `$refs` 访问子组件实例： ```vue <!-- parent.vue --> <children ref='ch'> 父组件 import children from './coms...
vue组件 $children,$refs，$parent的使用详解
12-02
`$refs` 是 Vue 中用于父组件引用子组件的一个机制。当你在子组件的标签上添加 `ref` 属性，并赋给它一个字符串值，这个值将在父组件中通过 `this.$refs` 访问。例如： ```html <firstchild ref="one"> ``` 父...
Vue $refs操作 DOM实现组件传值
01-20
在Vue.js中，$refs是Vue实例的一个属性，它允许我们在JavaScript中直接引用Vue实例下挂载的DOM元素或子组件。$refs主要用于在必要时直接操作DOM元素或调用子组件的方法，尤其是在某些场景下，如动画效果、事件处理等...
vue获取子组件高度
Irene1991的博客
01-09 6808
vue获取子组件高度 this.loopHeight = this.$refs["vueHeader"].$refs["getHeader"].offsetHeight 同理也可以获得子组件的数据和方法。 需求描述 就是官网的一个二级页内（锚点）导航，位置在轮播图下方。 需要在轮播图看不见后，自动贴着一级导航（固定定位 position: fixed），固定定位在页头一级导航下面。...
vue中ref 根据多选框所选数量，动态地变换box的高度
大剑师兰特的GIS世界
03-14 1044
做项目时候碰到这样的一个需求: 左边列表中有4种类型，通过checkbox做选择，选择的数量的不同，决定了右侧的box的高度的不同。这里采用了ref的方法，定位到dom，进行高度的改变。
Vue 获取子组件高度
m0_63969219的博客
05-20 2607
CSS 选择器 一般 DOM 元素应用此方法没有问题，但是有父子组件关系时，因为组件加载顺序的问题，可能会导致获取元素为 null export default { mounted() { console.log(document.querySelector("id").clientHeight) } } ref 节点获取 给子元素的根节点添加 ref ，在父组件中 this.$refs['child'].$refs['child-dom'] 来获取子组件 DOM。 每个组件都有一个
vue+el-table 根据屏幕大小动态设置max-height属性适合适配多个表格高度出现滚动条
热门推荐
m13302979400的博客
06-18 1万+
<el-table ref="table" :data="info" :span-method="colspanMethod" :max-height="tableHeight"> <el-table-column type="selection" width="40"> </el-table-column> <el-table-c...
vue3父组件使用ref获取子组件的属性和方法
逆风优雅的博客
05-23 3293
2.在引入的子组件标签上绑定ref属性的值与定义的响应式变量同名( <demo1 ref="demo1"/>)。1.<script setup> 中定义响应式变量 例如： const demo1 = ref(null)此时子组件用的是 export default 的写法。的组件，想要让父组件访问到它的属性和方法需要借助与。写法会导致父组件无法访问到子组件中的属性和方法。这种方式，父组件可以正常获取到里面的属性和方法。此时父组件可以获取到子组件的count属性（来指定需要暴露给父组件的属性。
vue组件间通信的实现方式，父组件可以通过props属性将数据传递给子组件，子组件可以通过$emit方法触发父组件定义的事.md
06-13
6. 使用$ refs访问子组件：可以通过给子组件设置ref属性，然后通过this.$ refs来访问子组件的方法和数据。 7. 使用$ parent和$ children：可以通过this.$ parent来访问父组件的数据和方法，通过this.$ children来...
Vue父组件如何获取子组件中的变量
10-16
在上面的代码中，`<db-source-add ref="addAlert">`使得我们可以在父组件的`addDbSource`方法中通过`this.$refs.addAlert`来访问子组件`db-source-add`的实例，并通过操作其DOM属性`style.display`来控制显示。...
Vue2.0实现自适应分辨率
LeftStrang的专栏
11-25 3480
Vue2.0+elementUI 实现自适应分辨率
父组件用ref获取子组件数据
weixin_63681863的博客
11-14 240
子组件的数据和方法一定要记得用defineExpose暴露，不然父组件用ref是获取不到的！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值