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

场景

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

页面结构如下：

实现

首先在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>

效果

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

Vue单文件中引入背景图片时，四周有空白的问题
Vue单文件中引入背景图片时,四周有空白的问题问题背景初始引入背景图更新后的背景图设置问题背景近期公司有个管理系统前后端分离,但是前端人员不够,只能我们后端来凑,而在前端的开发过程中总是遇到 ...
Vue 单页面应用把公共组件放在 app.vue 但是我希望某个页面没有这些公共组件怎么办???(比如登陆页面)
<div class="all" v-if="$route.path!=='/login'" > Vue 单页面应用把公共组件放在 app.v ...
Vue单页面中进行业务数据的上报
为什么要在标题里加上一个业务数据的上报呢,因为在咱们前端项目中,可上报的数据维度太多,比如还有性能数据.页面错误数据.console捕获等.这里我们只讲解业务数据的埋点. 业务数据的上报主要分为: 各 ...
如何在vue页面中引入其他的子组件？(局部引入/全局引入)
在页面中引入子组件分为局部引入和全局引入,局部引入顾名思义就是只在当前页面引入且只在当前页面显示,全局引入即引入后在所有页面都显示. 首先我们创建两个页面Test.vue和Tset2.vue: 起始效 ...
【转】Vue.js入门教程（二）在页面中引入vue的方式
第二章:安装和基础效果展示页面中引入vue 因为我们的目标是在最短的时间之内学会vue的使用方法,所以我们不一定需要通过npm工程化进行安装,你直接用script在页面中引用也完全没有问题. 第一种 ...
php vue seo,处理 Vue 单页面 SEO 的另一种思路
(设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.Rea ...
seo需要处理页面html,详解处理Vue单页面应用SEO的另一种思路
(设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.Rea ...
vue单页面背景颜色修改
最近在做项目中,使用vue开发移动端项目,遇到一个小问题,路由跳转同时修改当前页面的背景色. 下面简单说一下vue单页面应用,由于vue的单页面应用导致我们的项目只有一个index.html文件,然而 ...
vue index.html 缓存,解决vue单页面回退页面 keeplive 缓存问题
场景:项目中遇到 vue 点击回退从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新 A页: B页: 解决方法: 利用keep-alive 缓存需要缓存的页面 1 ...

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

场景

实现

效果

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

最新文章

热门文章