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

蔚落 2023-10-18 11:52 87阅读 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 条评论，87人围观）

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

相关阅读

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

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

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

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

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

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

相关 Vue中怎样引入Element

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

相关 vue 异步引入组件

异步操作以一个工厂函数的方式定义返回你的组件,这个工厂函数会异步解析你的组件定义,Vue只有在这个组件需要被渲染的时候才会触发该工厂函数且会把结果缓存起来供

心已赠人/ 2021年07月24日 14:39/ 0 赞/ 693 阅读