记录一下vue调用子组件后，子组件和前面的文字不在同一行的问题

已于 2023-05-05 11:02:28 修改
阅读量387 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-05-05 10:59:27 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fairy_wu/article/details/130502369
版权

今天打代码的时候遇到了个vue引用子组件后子组件和前面的文字不在同一行的问题，如图所示。

试了好几个方法后，发现给子组件加上style="vertical-align: middle;display: inline-block;"的样式就可以在同一行了，码一下~

fairy_wu
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
Vue log和标题放在同一行
tangyuan的博客
03-31 739
<template> <div class="title-container"> <div> <el-image style="width: 100px; height: 100px; left: 10px" :src=shuLog fit="contain"> </el-image> <div class="title"> <span>xxxx平台</span&
vue如何设置两个组件的位置使他们连在一起
weixin_42611310的博客
02-15 927
如果你想让两个 Vue 组件连在一起，你可以在一个组件中使用另一个组件作为一个子元素。 具体来说，你可以在一个父组件的模板中使用子组件的标签，如下所示： <template> <div> <child-component></child-component> <other-child-component></ot...
vue-ads-table-tree tailwindcssvue-ads-table-tree-vue表组件，具有过滤，排序和分页功能。 行可以具有子行，因此可以构建树结构。 它还支持异步调用以从后端加载行。 它是使用CSS框架tailwindcss构建的-Vue.js开发
05-27
vue-ads-table-tree Vue ads表树是vue js表组件，具有树功能。 以下是此表所有功能的列表：过滤器vue-ads-table-tree Vue ads表树是vue js表组件，具有树功能。 这是此表的所有功能的列表：根据特定列或所有列的行值过滤行。 对一列或多列上的行进行排序。 可排序的列是可配置的。 对行进行分页。 将一或多个列上的行分组。 您可以按值或自定义范围分组（因此必须使用自定义回调）创建树结构：父行可以有子行
vue element上传文件并使上传文件按钮和其他按钮显示在同一行
Guoxuxinwen的博客
03-11 2535
vue element上传文件并使上传文件按钮和其他按钮显示在同一行 <el-form> <el-form-item > <!-- 文件上传按钮 --> <el-upload class="upload-demo" action="http://localhost:9002/educenter/member/upImg" :on-preview="handlePreview" :on-
解决vue文件ctrl+s保存时，每个属性各占一行问题
weixin_51386631的博客
03-24 361
解决vue文件ctrl+s保存时，每个属性各占一行问题 修改前效果 修改后效果 解决方法： 打开文件->首选项->设置 下拉，找到并打开 settings.json文件 找到“js-beautify-html”将 "wrap_attributes": "force-aligned" 改为“auto” ...
vue input 和 button 处于同一行的写法
a5601564的博客
03-08 1万+
<el-form-item prop="email-code" :inline="true"> <el-input ref="authCode" v-model="pwResetForm.authCode" :placeholder="$t('pwReset.authCode')" name="authCode" ..
Vue项目保持element组件同行，设置组件不自动换行
益添的博客
07-17 6万+
因为Vue是响应式的，所以就想做个计算器来用下，样式就使用了element。 想要做成的效果是这样一个加减乘除： X + Y = M 22 + 33 = 55 但是由于element中的组件自动换行了，所以出来的结果是这样的： &lt;el-row&gt; &lt;el-col :span="8"&gt;&lt...
文字和icon组件显示在同一行
weixin_44277207的博客
08-28 1344
文字和icon组件显示在同一行
vue 标题和输入框分两行，调成一行
轻风细雨_林木木
11-26 112
如图： 如果需要改成和下面一样的在同一行，只需要添加label-width="100px"(标题宽度)
解决el-form的label和el-input不在同一行问题
m0_46544598的博客
10-27 2888
解决el-form的label和el-input不在同一行问题
vue vantUI tab切换时 list组件不触发load事件的问题及解决方法
11-21
最近由于公司项目需要，用vue写了几个简单的...就是list组件做上拉加载只有在第一个tab会触发，切换后触底不会再次触发 解决办法： 初始化定义了list的加载状态 tab切换时；重新初始化一次就行了 这样就解决了tab切换
vue 组件使用中的一些细节点
12-12
以上大家都懂，这边就不多说，回到代码里，有时候我们需要 tbody 里面每一行是一个子组件，那我们代码可以怎么写呢？我们可以这样写，定义一个全局组件，如下： 然后我们在 body 里面可以这么调用: 运行结果: ...
iOS使用核心的50行代码撸一个路由组件
01-04
之前看过挺多的关于路由管理、路由处理的文章，常常会和组件化出现在一起，一开始不知道为何路由和组件化出现在一起，后来公司的项目中使用了路由组件（他本身也是一个组件，确切的说是一个中间人或者中介者），才...
vue用ant design中table表格,点击某行时触发的事件操作
01-18
使用customRow 设置行属性，写对应事件 :customRow=”rowClick” 然后在data里面写 rowClick: record => ({ // 事件 on: { click: () => { // 点击改行时要做的事情 // ...... console.log(record, 'record...
vue子组件懒加载（按需加载）
最新发布
m0_68956554的博客
07-05 1573
vue子组件懒加载（按需加载）
vue 父组件数据更新后子组件不变_vue 经典面试题+答案
weixin_39735012的博客
11-20 1028
以下面试题的答案都尽量扩展了知识面，并且不是那种一堆专业词的堆积，希望让新手也能看得懂。1、vue 解决了什么问题要回答这个问题，要先理解核心知识点：组件化组件化就是一种代码设计理念。最开始的面向过程编程使一个文件的代码特别多，难以维护，所以借鉴了后端的面向对象编程，使一个本需要几千行代码的文件可以被拆分成几个几百行的文件。一个组件就是一个类 new 出来的一个对象，是一个页面的一个部分，一个组件...
vue中的横向排列_DIV横向排列_CSS如何让多个div盒子并排同行显示
weixin_39598941的博客
12-19 7598
如何让多个div盒子并排同行div横向排列显示呢？我们先设置3个div盒子对象，什么css样式都不设置看看效果。代码如下：三个div盒子均独占一行显示div盒子本身默认样式属性是独占一行，而解决div独占一行方法通常有两种，一种为设置浮动，另外一种为设置display样式。接下来为大家通过文章+图片+案例方法介绍解决div盒子对象并排横向排列且同行显示方法。一、使用css float并排显示 ...
vue如何在一个组件中引用另外一个组件并使用?有两种方法
热门推荐
msn-06-s
02-03 7万+
方法一:代码如下 //1.先使用import导入你要在该组件中使用的子组件 import testComponent from './testComponent.vue' export default { //2.然后,在components中写入子组件 components:
vue父组件传字符串类型的值，传\n到子组件中没有出现换行效果
weixin_46353030的博客
12-07 285
解决方法 1. white-space和\n一起使用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div id="app"> <span style="white-space:
vue3 +ts 父组件调用子组件方法
05-25
在 Vue3 + TypeScript 中，可以通过 `ref` 和 `setup()` 函数来实现父子组件之间的方法调用。 首先，在子组件中，需要使用 `defineExpose` 方法将需要暴露给父组件的方法暴露出来： ```typescript import { defineComponent, defineExpose } from 'vue'; export default defineComponent({ setup() { const foo = () => { console.log('foo'); }; const bar = () => { console.log('bar'); }; // 将 foo 和 bar 方法暴露给父组件 defineExpose({ foo, bar }); return {}; }, }); ``` 然后，在父组件中，可以使用 `ref` 获取子组件的实例，并调用子组件暴露的方法： ```typescript import { defineComponent, ref } from 'vue'; import ChildComponent from './ChildComponent.vue'; export default defineComponent({ setup() { const childRef = ref(null); const callChildMethod = () => { childRef.value?.foo(); }; return { childRef, callChildMethod }; }, components: { ChildComponent, }, }); ``` 其中，`childRef` 是一个 `ref` 对象，用来保存子组件的实例。在模板中，需要将子组件的 `ref` 属性绑定到 `childRef` 上： ```html <template> <div> <ChildComponent ref="childRef" /> <button @click="callChildMethod">调用子组件方法</button> </div> </template> ``` 这样就可以在父组件中调用子组件的方法了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值