2021-07-05 解决:使用vue定义多个单标签组件时,只显示第一个组件

最新推荐文章于 2023-04-02 11:02:01 发布
最新推荐文章于 2023-04-02 11:02:01 发布
阅读量1.7k 收藏 1
点赞数 3
分类专栏： vue bug&error 文章标签： vue 组件 bug js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rowlet/article/details/118395873
版权
在Vue中遇到一个问题，当定义并使用多个单标签组件时，只有第一个组件会被渲染出来。经过分析，发现这是由于Vue处理单标签组件的方式导致的。将组件改为双标签形式后，所有组件均能正常显示。
摘要由CSDN通过智能技术生成
发现问题

设置两个组件.不能全部显示

出现原因

用单标签的时候，只会显示第一个组件
改成双标签后，就会显示两个组件了。

代码
html
<div id="app">
    <!-- 多标签 -->
    <!-- <my_component1></my_component1>
        <my_component2></my_component2> -->
    <!-- 单标签 -->
    <my_component1<
最低0.47元/天 解锁文章
前端OnTheRun
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue嵌套路由（默认显示第一个children路由）
Debug的博客
04-20 4689
App根组件中必须加router-view router文件中 import Vue from "vue"; import VueRouter from "vue-router"; import Home from "../views/home/Home.vue"; import Detail from "../views/home/detail.vue"; import Detail1 from "../views/home/detail1.vue"; Vue.use(VueRouter); const
关于在vue项目当中引入多个子组件时候只显示一个组件的问题
qq_41304029的博客
01-08 1018
少了留言区组件没有展示出来，本来我以为是组件写的有问题，然后将列表组件复制几遍时候一样只是展示第一个组件。这个是在html文件当中编写的，不是.vue组件当中编写，然后修改为双标签的才好了。经过查阅资料，才知道。
vue中只渲染数组中的第一条或某一条
qq_44161722的博客
09-30 2330
有时候数组中有两条或多条数据，但只想渲染其中的某一条，或者在特定的页面渲染某一条二、在特定的页面渲染某一条（比如父组件在调用子组件时传过来一个值，根据这个值去判断要渲染的数据）场景：有时候数组中有两条或多条数据，但只想渲染其中的某一条，或者在特定的页面渲染某一条。一、只想渲染其中的某一条（只渲染第一条数据）子：Review-info.vue。根据数组中的index进行判断。
vue让相同组件只显示一个
进击的程序猿
08-17 1435
常用的有单例模式，也可以采用组件间通信的方法 如下 <template> <div > <div @click="showComponent"> </div> <div class="x-class" v-show="show"> </div> </div> </template> <script> import Vue from "vue"; va
Vue实现v-for生成标签后默认展示第一个
qq_24243695的博客
01-29 4798
<template> <div> <ul> <li v-for="(item, index) in list1" @mouseenter="handleMouseEnter" :id="index"></li> </ul> <div> <div v-for="(item, index...
vue-tags-input组件使用指南(推荐)
10-15
Vue Tags Input组件是一种用于在Vue.js应用程序中实现标签输入功能的第三方组件。它以其小巧的体积、易用性以及丰富的自定义选项而受到推崇。在本文中，我们将深入探讨如何使用这个组件，以便在你的项目中高效地实现...
vue-Carousel-master-2018:基于vue的轮播图组件链接图片移动端PC端
05-15
这个名为“vue-Carousel-master-2018”的项目是基于Vue.js开发的一个轮播图组件，适用于移动端和PC端，提供了图片链接的功能。轮播图是网页设计中常见的元素，用于展示多张图片或内容，通过自动切换或用户手动操作来...
详解基于vue-cli3快速发布一个fullpage组件
10-17
组件接口设计是构建Vue组件的第一步。接口允许外部通过props属性传递数据给组件。本例中的fullpage组件主要的属性是`direction`，它决定了滚动的方向，可以是垂直（'vertical'）或横向（'horizontal'）。 ### 组件...
Web前端框架应用：第4章 Vue过渡动画-多个组件过渡.pptx
06-06
多个组件之间的过渡，只需要使用动态组件即可，动态组件需要通过Vue中的元素绑定is属性来实现多组件的过渡。接下来通过案例演示如何实现多个组件的过渡。 4.3 多个组件过渡 <!-- 定义登录组件 --> ...
vue-978-1-8389-8482-3:使用 Vue.js 的前端开发项目
05-30
5. **生命周期**：Vue实例有其特定的生命周期，从创建到销毁的过程中有多个钩子函数，如beforeCreate、created、beforeMount、mounted等，开发者可以在这些钩子中执行初始化操作或响应性地更新数据。 6. **表单处理...
vue 插槽 单个插 槽多个插槽 插槽应用
weixin_43444977的博客
05-07 1289
插槽：父组件里的数据插入到子组件的指定位置 单个插槽： 子组件： <template> <div style="background: red;"> childslot <slot></slot> </div> </template> <script> export default { name: "childslot" } </script> <style s
html批量传递id,怎么传递一个html的dom的id到vue组件中？
weixin_33493816的博客
06-18 256
html:Demo.vue// 通过props属性传入id// props: ["id"],props: ["divId"],data() {return {//...}},methods: {submit() {// this.divId即所需的idvar id = this.divId;// ...}}Update1:一开始没注意id是特殊属性，现修改上述代码，把id换成一个一般的名字。htm...
vue一个页面多次使用同一个组件（自己封装的echarts），重复使用只有一个能正常展现的解决方案（亲测有效）
qq_26323419的博客
06-10 5467
大概率是echarts init有问题，是不是用class或id选择器选择元素来init了 错误版本： 正确版本： 装载来源：https://blog.csdn.net/bossjing/article/details/85683247 ...
Vue路由怎么实现默认组件显示
weixin_42594427的博客
01-17 591
在 Vue 路由中实现默认组件显示，可以在路由配置中添加一个名为 "redirect" 的配置项。它指向要作为默认显示的组件的路径。 示例： const router =new VueRouter({ routes: [ { path: '/', redirect: '/home' }, { path: '/home', component: Home },...
v-for含有echarts图标的组件为什么只有第一个渲染
weixin_46448762的博客
08-24 362
因为id唯一，v-for出来的id不唯一。示例 vue3+setup语法糖。使用ref获取标签元素。
Vue中的slot插槽
最新发布
qq_50582468的博客
04-02 1400
但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的标签元素；例如某种情况下我们使用组件，希望组件显示的是一个视频，一张图片或按钮，插槽可以让使用者灵活的决定组件内某一块区域中放什么内容。插槽可以提供一个默认内容，如果父组件没有为这个插槽提供内容，会显示默认的内容。slot具有“占坑”的作用，在子组件占好了位置，那父组件使用该子组件标签时，新添加的DOM元素就会自动填到这个坑里面。slot没有指定name属性值的时候显示一个默认插槽，一个组件内只有一个默认插槽。（3）slot插槽的分类。
两种方式构建vue单页面多组件应用
水月灯花的博客
07-28 1802
方法一、使用vue的v-if指令 该指令可以根据表达式的值实现html的元素或者vue的template模板切换，实现dom渲染，从而实现据绑定 / 组件被销毁并重建。借助该指令，实现多组件之间的切换显示，从而实现不同功能页面的展示。 首先是引入组件，然后通过v-if指令，设置关键字，然后在data中设置属性为true 或者 false 实现模板之间的切换，或者通过定义方法，改变关键字的值，因为在vue中一切皆数据，通过改变数据改变组件，实现组件切换显示。 <template> &lt
Vue组件，怎么样自定义标签
十三月的博客
05-27 556
demo.html中自定义fdw标签 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--传递给组件的值怎么接收 v-bind:接收参数="遍历参数"-->...
VUE 百度地图循环加载marker并添加多个信息窗口，只显示最后一个窗口信息的问题，这个咋整啊
WC_20001111的博客
03-06 256
为啥只显示最后一个的信息框啊？
在vue3中使用ant-table-design组件生成一个表单，要求有多个表头
03-22
可以使用 ant-table-design 组件的 column 属性来定义多个表头，示例代码如下： ```html <a-table :columns="columns" :data-source="dataSource"></a-table> import { defineComponent } from 'vue'; import ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端OnTheRun

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值