怎样在vue单页面中引入其他组件

蔚落 2023-10-18 11:52 76阅读 0赞

### 场景 ###

在一个vue的单页面，假如是home.vue中要引入其他组件的内容。

页面结构如下：

![Image 1][]![20181127210752392.jpg][]

### 实现 ###

首先在components下新建组件Today\_recommend.vue组件

<template lang="html">
      <div class="">
      今日推荐
      </div>
    </template>
    
    <script>
    
    export default {
    
    }
    </script>
    
    <style lang="css">
    </style>

然后想在home.vue这个页面中引入组件Today\_recommend.vue，打开home.vue

<template lang="html">
      <div class="">
        <TodayRecommend/>
      </div>
    </template>
    
    <script>
    import TodayRecommend from "../components/Today_Recommend"
    export default {
        name:"home",
        components:{
        TodayRecommend
        }
    }
    </script>
    
    <style lang="css">
    </style>

###    效果 ###

![Image 1][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70][]

[Image 1]: 
[20181127210752392.jpg]: https://img-blog.csdnimg.cn/20181127210752392.jpg
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20181127210823120.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JBREFPX0xJVU1BTkdfUUlaSEk=,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，76人围观）

还没有评论，来说两句吧...

相关阅读

相关怎样在vue中导入组件？

![cd37902a63f44b63a39f1f1f0a80d224.png][] 要在 Vue 中导入组件，有以下几个步骤： 1. 在你的 Vue 项目中创建一个新的组

àì夳堔傛蜴生んèń/ 2024年03月26日 19:09/ 0 赞/ 82 阅读

相关怎样在vue单页面中引入其他组件

场景在一个vue的单页面，假如是home.vue中要引入其他组件的内容。页面结构如下： ![Image 1][]![20181127210752392.jpg][

蔚落/ 2023年10月18日 11:52/ 0 赞/ 77 阅读

相关 Vue中怎样引入Element

引入Element 完整引入在vue项目下的src下的main.js中加入 import Vue from 'vue'; import Elem

秒速五厘米/ 2023年10月18日 10:28/ 0 赞/ 72 阅读

相关 vue项目通过url链接引入其他系统页面

1.正常配置菜单，在vue页面使用iframe进行嵌套加载其它系统的页面，已加载百度为例 <template> <div id="app">

以你之姓@/ 2023年10月05日 03:57/ 0 赞/ 31 阅读

相关 Vue 引入组件、引入图片

引入组件的两种方法 1、全局引入（在App.vue的script标签中） 1、引入（Import 变量 from 路径） import head fo

落日映苍穹つ/ 2023年07月20日 05:39/ 0 赞/ 45 阅读

相关 vue中引入其他网站页面

以百度为例因为代码比较简单直接附上源码 <template> <Card shadow> <div style="mi

喜欢ヅ旅行/ 2023年06月08日 06:13/ 0 赞/ 27 阅读

相关 vue页面引入多个组件的方法

通常我们使用的是单个文件引入，但是这样就会有很多代码是重复的，怎样才能实现“按需“引入呢？ ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5n

痛定思痛。/ 2023年02月15日 10:02/ 0 赞/ 23 阅读

相关 vue引入其他框架组件方法汇总

博前声明：这些方法都是基于nod.js的npm和webpack打包构建工具的前提下一、引入jQuery框架：首先在当前项目的根目录下（就是与package.json同目

谁借莪１个温暖的怀抱￠/ 2022年06月07日 06:47/ 0 赞/ 506 阅读

相关怎样在jsp中引入bootstrap样式

1、先在WEB-INF中新建一个文件夹，然后在添加css,fonts,js三个文件，如下图：![在这里插入图片描述][20181221185305716.png] 2、引入

超、凢脫俗/ 2022年04月03日 10:18/ 0 赞/ 511 阅读

相关 html页面引入其他html页面代码

{include file="/course/common/footer.html"} //注意路径书写方式用该语法可以引入公共html模板代码举例：

川长思鸟来/ 2022年02月04日 06:55/ 0 赞/ 475 阅读