Vue组件之间的嵌套

最新推荐文章于 2024-06-19 10:09:03 发布
最新推荐文章于 2024-06-19 10:09:03 发布
阅读量187 收藏
点赞数
文章标签： vue.js 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_48947842/article/details/106963297
版权

Vue组件之间的嵌套

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button {
            width: 60px;
            height: 30px;
            font-size: 16px
        }
        
        .content {
            width: 200px;
            height: 100px;
            border: 1px solid green;
            margin-top: 5px;
        }
    </style>
</head>

<body>
    <div id='app'>
        <div id="left">
            <ul>
                <li>
                    <a href='#' @click.prevent='conName="patient"'>我的病人</a>
                </li>
                <li>
                    <a href='#' @click.prevent='conName="Medical records"'>电子病历</a>
                </li>
            </ul>     
        </div>
        <div id="right">
            <div>
            </div>
        </div>
        <component :is="conName"></component>
    </div>
</body>
<script src='./js/vue.js'></script>
<script>
    // 创建登陆，注册组件
    Vue.component('patient', {
        template: `
        <div>
            <p>这是我的病人页面</p>
            </div>`
    })

    Vue.component('Medical records', {
        template: `
         <div>
            <p>这是我的病历页面</p>
            </div>`
    })

    Vue.component('details', {
        template: `
         <div>
            <p>这是我的详情页面</p>
            </div>`
    })

    Vue.component('list', {
        template: `
         <div>
            <p>这是我的列表页面</p>
            </div>`
    })

    Vue.component('patient', {
        data () {
        return {
            conName2: 'details'
        }
        },
        template: `
         <div>
            <a href='#' @click.prevent='conName2="details"'>详情信息</a>
            <a href='#' @click.prevent='conName2="list"'>病人列表</a>
            <component :is="conName2"></component>
            </div>`
    })
    

    var app = new Vue({
        el: '#app',
        data: {
            // true 登陆；false 注册
            flag: false,
            conName: 'patient' // 当前的conName 就是 component中的：is绑定的组件的名称
        }
    })

    // 总结：如果页面中出现多个组件来回切换的效果，比如百度首页的导航的切换，就可以使用 <component :is='"组件的名称"'></component>
</script>

</html>
陸陽
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue项目嵌套（vue2嵌套vue3）
小王的技术库
06-27 5867
创建 template.vue 中间跳转页路由。 点击左侧菜单将符合条件的路由跳转到产品库。 template.vue 监听路由并更新产品库路由，同时传递用户登陆信息实现自动登陆 产品库获取登陆信息及路由信息进行模拟登陆操作。 产品库向产品测试进行通信 问题总结及解决方案 左侧菜单路由高亮状态 展示产品库页面时，对应左侧菜单路由要相应高亮选中。 在监听路由跳转时，判断当跳转产品库页面时，取 query 中的 path 字段为 url 做高亮处理。 产品测评面包屑导航页面路径 展示
vue/组件嵌套/无限嵌套/嵌套组件消息传递/嵌套父子组件传值
fireInNight的博客
03-19 7249
目前接到一个需求，是我之前从来没有实践过的，正好趁此机会做一个深度剖析，并记录下这次的成长，并分享给大家。 需求文档: 一 、（一个厂商编号和一个版本号）唯一决定一个配置 二 、 配置内容支持**无限嵌套** 三、配置数据格式示例（配置包括项和模块） ...
vue项目用iframe嵌入另外一个vue项目(cesium)
liubangbo的专栏
06-25 3569
用web服务器启动vue项目的方法很多，例如采用tomcat服务器，nodejs服务器，nginx服务器。这里我们用nginx服务器启动vue项目。如果要被iframe嵌入的项目集成了cesium，用这种方法，cesium在加载地图时会报错，需要采用web服务器启动这个vue项目。vue项目用iframe 项目嵌入另外一个vue项目，主要分2种情况，一种情况是嵌入本地项目，另外一种是嵌入用web服务器启动的vue项目。然后启动nginx， start nginx.exe。2）用web服务器启动vue项目。
基于java jsp ssm vue医院门诊病例病历管理系统(源码+LW+部署讲解)
最新发布
全网粉丝10W+、全栈领域优质创作者、掘金、阿里云等社区博客专家
06-19 984
💗博主介绍：✌全网粉丝10W+,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者，博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌💗👇🏻精彩专栏 推荐订阅👇🏻2025-2026年最值得选的微信小程序毕业设计选题大全：100个热门选题推荐✅2025-2026年最值得选的Java毕业设计选题大全：500个热门选题推荐✅Java毕业设计项目精品实战案例《3000套》微信小程序毕业设计项目精品案例《3000套》
vue-element-template 框架嵌入 vue2.x 项目中
前端技术
05-25 1853
需求 在某个已开发的 vue2.x 项目中嵌入轻量级的后台管理框架 下载 注意官网提供了多个方案模板，我使用的是基础模板 vue-admin-template 嵌入 下载 vue-admin-template工程，注意我当时下载的是 v4.4.0。代码结构如下 步骤一： 1. 直接将红框文件拷贝到你的项目中； 2. 将 getters.js 文件中的信息拷贝到你的项目中； 步骤二 安装插件 npm i js-cookie npm i normalize.cs....
vue3项目如何嵌入别的项目
weixin_44257822的博客
01-16 2284
4，在src/components或者任意合适的位置创建一个组件，比如名为"EmbeddedProject.vue"。5，在这个组件内部添加一个iframe标签，设置src属性指向子项目的index.html文件路径。6，现在，你可以在主项目的页面上引入这个自定义组件，就像引入其他Vue组件一样。首先，确保已经安装了Vue CLI并创建了新的Vue 3项目。7，最后，重新编译和运行主项目，你应该能看到嵌入的子项目显示在主项目的相关页面上。1，打开需要被嵌入的项目（称为子项目）的根文件夹。
vue工程包含多个项目且支持多个环境部署
骚饼
04-03 2699
vue工程包含多个项目且支持多个环境部署
Vue 多层组件嵌套二种实现方式(测试实例)
08-29
Vue 多层组件嵌套二种实现方式 Vue 是一个基于组件的前端框架，它提供了灵活的组件嵌套机制，允许开发者自由地组合和嵌套组件以实现复杂的界面布局。下面我们将讨论 Vue 多层组件嵌套二种实现方式。 实现方式一：...
使用form-create动态生成vue自定义组件和嵌套表单组件
10-17
在本文中，我们将深入探讨如何使用`form-create`来动态生成vue自定义组件和嵌套表单组件。 首先，`form-create`的核心在于`maker`对象，它提供了一系列的方法来创建不同类型的组件。例如，`maker.create()`可以用来...
vue父子组件的嵌套的示例代码
08-29
现在，让我们来看一个父子组件嵌套的示例代码。首先，我们定义一个子组件 `child`，然后在父组件 `parent` 中使用它： ```html <!DOCTYPE html> <title>index <parent></parent> <script src="vue.js">...
public-vue-cli:多个项目公用一套vue-cli 配置
05-14
更多页面 一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev test-1 # build for production with minification npm run build test-1 # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run e2e tests npm run e2e # run all tests npm test 有关工作原理的详细说明，请查看的和。
基于Vue的医院电子病例管理系统前台设计源码
04-07
本项目是一个基于Vue的医院电子病例管理系统前台，包含139个文件，主要文件类型包括JavaScript脚本、Vue组件、SVG图形文件、SCSS样式表、XML配置文件、YAML配置文件、Markdown文档、JSON配置文件、图片和EditorConfig文件。系统设计旨在为用户提供一个高效、便捷的电子病例管理平台，以满足医院在病例管理方面的需求。
基于SSM+Vue的医院门诊互联电子病历管理信息系统（源码+部署说明+系统介绍+源码解释）.zip
04-24
基于SSM(Spring+SpringMVC+MyBatis)和Vue.js的医院门诊互联电子病历管理信息系统是一个集成了多种技术的医疗信息化系统，旨在提高医院门诊的管理效率和服务质量。 该系统主要由以下模块组成： 用户管理模块：包括用户的注册、登录、权限管理等功能，通过使用Spring Security框架实现安全认证和授权控制。 病人管理模块：包括病人的信息录入、查询、修改、删除等功能，通过使用MyBatis框架实现数据库访问和数据持久化。 医生管理模块：包括医生的信息录入、查询、修改、删除等功能，通过使用MyBatis框架实现数据库访问和数据持久化。 药品管理模块：包括药品的信息录入、查询、修改、删除等功能，通过使用MyBatis框架实现数据库访问和数据持久化。 病历管理模块：包括病历信息的录入、查询、修改、删除等功能，通过使用Vue.js框架实现前端页面的开发和交互效果。 统计分析模块：包括数据的统计、分析和报表生成等功能，通过使用Echarts等图表库实现数据的可视化展示。 系统设置模块：包括系统的基本信息配置、日志管理、安全管理等功能，通过使用Spring Boot框架实现快速开发和部署。 该系统具有以下特点： 安全性高：通过使用Spring Security框架实现安全认证和授权控制，保证系统的安全性。 可扩展性强：通过使用MyBatis框架实现数据库访问和数据持久化，支持多种数据库类型和版本。 界面友好：通过使用Vue.js框架实现前端页面的开发和交互效果，使系统的用户体验更加友好。 数据分析能力强：通过使用Echarts等图表库实现数据的可视化展示，方便用户进行数据分析和决策。 总之，基于SSM+Vue的医院门诊互联电子病历管理信息系统是一个功能强大、性能稳定、易于维护的医疗信息化系统，可以为医院门诊的管理和服务提供有力的支持
基于 vue-cli 2 实现，vue 多模块、vue多项目集成工程
qq_32191329的博客
11-08 1792
Github项目地址 : https://github.com/BothEyes1993/vue-multi-module 目标：多模块集成的vue项目，多项目共用一份配置，可以互相依赖，也可以独立打包部署 使用业务场景 1.如果项目可能有对应多个不同UI界面;对于这样的场景你可能首先会想到，用样式主题就可以实现，基本的样式或者换肤是可以通过样式实现。但如果要实现更复杂的，比如不同两套UI的界面可...
Vue多项目共用组件&多项目合并一个项目中分开打包发布
我有一个小目标
08-04 8576
背景 需求：pc端可以编辑保存在移动端上显示的界面，pc端上可以预览移动端上的显示。（上述pc端及移动端都是Vue项目） 这样看来，这个pc端预览界面及移动端上的显示，肯定是要用同一套组件了。 以前做过类似的项目是用iframe嵌套移动端界面实现的，但是后来非常后悔：1、数据传输是个问题，无论postmessage还是借助服务端，都非常麻烦。2、不灵活 现在打算做一套公用组件，给两端使用，但是又不想在git上维护3个项目（3个项目包括：pc，移动，共用组件），因此有了本文：Vue多项目共用组件，并且
qiankun引入vue3子项目实践
junner443的博客
03-28 984
qiankun引入vue3子项目实践 背景 vue3优点就不
多个vue项目公共组件的三种方法
細水、長流√的专栏
11-04 4631
我们可以采取专人维护common包的方式，common的组件编写完成后，将其发布到npm。发布流程如下：在注http://www.npmjs.com册一个账号进入common的控制台，输入命令npm login，按照提示输入刚注册的账号密码输入命令 npm publish 即可当然common这个名字肯定被注册了，这里只做示例，真正使用时需使用一个未在npm中注册的包名。
使用vue-cli搭建SPA项目
weixin_45174537的博客
08-26 253
什么是vue-cli? vue-cli是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，创建命令如下： vue init webpack xxx 【注1】xxx 为自己创建项目的名称 【注2】必须先安装vue,vue-cli，webpack，node等一些必要的环境 安装vue-cli 在cmd执行命令： npm install -g vue-cli 安装成功后在 E:\...
Vue基于springboot的医院电子病历病例管理系统echart excel导入导出,打印系统
豆包程序员
04-26 962
本系统结合计算机系统的结构、概念、模型、原理、方法，在计算机各种优势的情况下，采用JAVA语言，结合SpringBoot框架与Vue框架以及MYSQL数据库设计并实现的。它帮助电子病历管理实现了信息化、网络化，通过测试，实现了系统设计目标，相比传统的管理模式，本系统合理的利用了电子病历管理数据资源，有效的减少了电子病历管理的经济投入，大大提高了电子病历管理的效率。电子病历管理系统是针对目前电子病历管理的实际需求，从实际工作出发，对过去的电子病历管理系统存在的问题进行分析，完善用户的使用体会。
vue组件封装嵌套案例
05-04
下面是一个简单的Vue组件封装嵌套案例： ```html <!-- 外层组件 --> <template> <div> <h3>{{title}}</h3> <inner-component :items="items"></inner-component> </div> </template> <script> import InnerComponent from './InnerComponent.vue'; export default { name: 'OuterComponent', components: { InnerComponent }, props: { title: { type: String, required: true }, items: { type: Array, required: true } } } </script> ``` ```html <!-- 内层组件 --> <template> <div> <ul> <li v-for="(item, index) in items" :key="index">{{item}}</li> </ul> </div> </template> <script> export default { name: 'InnerComponent', props: { items: { type: Array, required: true } } } </script> ``` 在这个例子中，我们创建了一个外层组件 `OuterComponent` 和一个内层组件 `InnerComponent`。外层组件接收一个 `title` 属性和一个 `items` 属性，然后将 `items` 属性传递给内层组件。内层组件接收 `items` 属性并将其渲染为一个无序列表。 使用这个组件可以这样： ```html <template> <outer-component title="My List" :items="['Item 1', 'Item 2', 'Item 3']"></outer-component> </template> <script> import OuterComponent from './OuterComponent.vue'; export default { name: 'App', components: { OuterComponent } } </script> ``` 这将渲染一个外层组件，标题为 `My List`，并将一个字符串数组作为 `items` 属性传递给外层组件。外层组件将 `items` 属性传递给内层组件，内层组件将其渲染为一个无序列表。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值