vue如何在父组件中修改子组件的宽度等css属性?

最新推荐文章于 2024-03-29 22:53:58 发布
最新推荐文章于 2024-03-29 22:53:58 发布
阅读量991 收藏
点赞数
分类专栏： vue css 文章标签： vue.js vue javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/bydfguifd/article/details/128607637
版权
vue 同时被 2 个专栏收录
3 篇文章 0 订阅
订阅专栏
css
3 篇文章 0 订阅
订阅专栏

父组件操作

  1. 在子组件上添加ref=“child”命名
  2. 在显示子组件的函数中 先使用 this.$refs.child.toggleWidth =’ ‘1100px’'直接修改子组件的data数据中的toggleWidth的值 再让子组件显示

在这里插入图片描述

子组件操作

  1. 在子组件最外层加一个div
  2. div添加属性:style=“{ width: toggleWidth ? toggleWidth : ‘1188px’ }”
  3. data中添加属性toggleWidth 设置初始值 toggleWidth: ‘’,

在这里插入图片描述
其他属性同理

bygsn
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-gauge:Light轻量级Vue组件，用于使用纯CSS绘制半圆规
03-27
Vue量规 轻量级Vue组件，用于使用纯CSS绘制半圆规。 特征 响应式半圆规 纯CSS 动画（可以关闭） 没有外部依赖 演示版 安装 在制品 通过纱线或npm安装。 程序包名称将在发布后放置在此处。 ES6导入 import VgGauge from 'vue-gauge' ; import 'vue-gauge/dist/vue-gauge.css' ; Vue . use ( VgGauge ) ; 用法 由于仪表组件具有响应性，因此可以使用纯CSS设置其宽度。 默认情况下，它占用可用的全部宽度。 基本用法 只需将组件添加到模板中，然后将value属性绑定到您的value变量即可。 < vg xss=removed> 道具 Struts 类型 必需的 默认 描述 value 数字 不 0 用于呈现进度部分的值 max 数字 不 100
Vue动态获取width的方法
10-18
今天小编就为大家分享一篇Vue动态获取width的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 子组件直接修改 props 中的属性值（单向数据流）
Microven
03-02 1万+
理论 所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外变更父级组件的状态，从而导致你的应用的数据流向难以理解。 另外，每次父级组件发生变更时，子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop。如果你这样做了，Vue 会在浏览器的控制台中发出警告。 Vue3 Props 文档 尝试通过下面的方法直接修改属性值 this.$props.modelValue
Vue3修改子组件CSS(使用:deep())
最新发布
Kevin的博客
03-29 327
2、在父组件中修改对应的class。1、在子组件中设计class。
vue中父组件如何动态修改子组件的值？
bydfguifd的博客
01-09 443
vue中父组件如何动态修改子组件的值？
vue子组件改变父组件中data的值
热门推荐
mldwyy的博客
03-17 2万+
1.子组件无法直接使用父组件中data的值 2.prop是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。 那么改如何在子组件中修改父组件的data中变量呢？ 既然子组件无法获取父组件的变量，那就让父组件自己修改自己的数据--&gt;子组件调用自己的方法，该方法中调用this.$emit方法用来通知父组件“你该去修改你的变量啦” 可以通过在子组件中调用this...
css父子盒子的width问题
qq_44718039的博客
06-22 3629
css父子盒子的宽度问题
Vue父组件和子组件对于width:100%和width:inherit
qq_41154880的博客
07-15 3277
Vue父组件和子组件对于width:100%和width:inherit
Vue里父组件如何修改子组件样式
weixin_49707375的博客
12-08 6182
在使用Vue开发过程中，我们有时会用到一些外部组件，如ElementUI、Vant等。使用这些外部组件的过程中，你有没有遇到过这种情况：有时候我们需要对该组件的样式做一些调整，但在调用该组件的父页面怎样修改样式，都看不到变化。这是为什么呢？一般我们在Vue写style的时候，都会给标签添加scoped属性，让css只作用域当前组件中的元素，避免了污染全局样式。但是在父组件中添加scoped之后，父组件的样式将不会渗透到子组件中，所以在父组件中写子组件的样式是无效果的。那么要如何做才能在父组件修
Vue中父组件如何控制子组件的值
pleaseprintf的博客
06-30 6434
在Vue开发中，父组件和子组件之间的数据传递是一项常见的任务。本文将介绍如何在Vue中实现父组件控制子组件的值，以便灵活地管理和更新子组件的数据。Vue中通过props属性可以实现父组件向子组件传递数据，但是如果我们希望父组件能够直接控制子组件的值，就需要使用.sync修饰符或者自定义事件来实现双向绑定。下面我们将详细介绍两种方法。1.在子组件中，定义一个props属性，用于接收父组件的值。例如，子组件的props属性名为value。2.在子组件内部，使用emit。
子组件根据父组件宽度调整的问题
anshaobiao6449的博客
07-27 2222
今天遇到一个奇葩的问题: 窗口扩大的时候子组件跟着扩大了，但是缩小的时候子组件却不缩小 原因： 扩大窗口的时候：父组件width>子组件width ， 自然子组件要跟着变化 缩小窗口的时候：父组件width被子组件撑大，导致父组件width=子组件width, 自然子组件就不会改变了 解决方案： 父组件加一个：width:固定值px（如果想父组件宽度随自...
在vue中，响应式更改子容器的宽度
weixin_59547985的博客
01-18 394
解决父容器内容溢出时，子容器铺满父容器的情况下，需要通过移动父容器的横向滚动条才能查看子容器的全部内容。
vue实现文字横向无缝走马灯组件效果的实例代码
12-29
基于vue组件开发 <div class=wrap> // 外框，固定宽度 <div id=box> // 内部滚动框 <div id=marquee>{{text}}</div> //展示的文字 <div id=copy></div> // 文字副本，为了实现无缝滚动 <div id=node>{{text...
vue-media-query-mixin-Vue 2媒体查询mixin，可在组件js和组件模板中使用。 与引导程序和可视化视口兼容。 如果屏幕宽度为xs，则wXS返回;如果屏幕宽度为sm，则wSM返回true，等等。-Vue.js开发
05-27
vue-media-query-mixin一个vue mixin，用于获取当前的媒体查询xs，sm，md，lg和xl。 安装NPM npm安装vue-media-query-mixin YARN纱添加vue-media-query-mixin Vue mixin可以获取当前的媒体查询xs，sm，md，lg和xl。 ...
vue-abbr:vue.js的组件。 用于省略单行文本中的中间片段。 拖动窗口屏幕时，它也是自适应的
04-29
在显示宽度受到限制的空间中，它可以显示字符串的头部和尾部。 通过这种方式，将更容易推断出字符串的含义。 该组件正是您所需要的！ 特征 一种省略单行文本的新颖方法 良好的兼容性 安装 NPM npm install vue-...
vue-scrollbar, Vue的最简单滚动区域组件 https.zip
09-17
vue-scrollbar, Vue的最简单滚动区域组件 https Scrollbar使用自定义滚动条的最简单...高度和宽度都是纯 CSS，因此它是完全可以定制的可以定制的和 ！ 是啊。演示工具安装你可以将 vue-scrollbar.vue 插件导入你的vue组
vue2-scrollbar：具有用于Vue 2的自定义滚动条的最简单的漂亮滚动区域组件。https：bosnaufal.github.iovue2-scrollbar
02-21
安装您可以像将导入到vue组件文件中，并使用预处理器对其进行处理。 您可以通过NPM安装它npm install vue2-scrollbar 或者只是放在Vue JS之后〜 < script src =" https://vuejs.org/js/vue.min.js " > </ ...
vue,element组件（下拉框）间的宽度和本身的宽度
xy405580364的博客
12-16 9192
label-width="50px" 距离上一个下拉框的距离 style="width: 125px" 下拉框本身的宽度 <el-form-item label="机构" label-width="50px"> <el-select v-model="formInline.institution" placeholder="机构" style="wi...
关于css3中flex布局(弹性布局/弹性盒子)
a1309525802的博客
05-10 461
关于css3中flex布局(弹性布局/弹性盒子) 开启flex布局 开启flex只需要在父标签中使用display:flex即可让整个父标签变成flex布局 flex容器属性 justify-content 水平上子组件分布情况 flex-start(向左对齐) center(居中对齐) flex-end(向右对齐) space-around(左右二边存在相同间距) space-between(左右二端对齐,间距相等) space-evenly align-items
vue样式子组件获取父组件宽度
03-14
在Vue中，要获取父组件的宽度，你可以使用`ref`属性和`mounted`生命周期钩子来实现。以下是一种可能的方法： ```vue <template> <div> <ChildComponent ref="childRef" /> </div> </template> <script> export default { mounted() { this.$refs.childRef.$el.clientWidth // 获取父组件宽度 } } </script> ``` 在上面的代码中，我们使用`ref`属性将子组件引用为`childRef`。然后在`mounted`生命周期钩子中，我们通过访问`$refs.childRef.$el`来获取子组件的根元素，并通过`.clientWidth`属性获取其宽度。这样就可以获取到父组件的宽度。 请注意，这种方法仅适用于具有固定宽度的组件。如果父组件是动态宽度，并且使用的是响应式布局，那么这种方法可能无法获取到正确的宽度值。在这种情况下，你可能需要使用其他方法来获取父组件的宽度，例如使用CSS样式或计算属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值