如何引入一个公共组件 例如我们的头部组件

于 2021-08-11 14:39:14 发布
阅读量158 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Qinlin_/article/details/119605807
版权

1、找到我们需要用到的文件夹

在这里插入图片描述
这个就是我们的整个文件夹，然后找到我们自己的页面，再找到需要引入的页面。就比如我的页面是光标在的地方，我需要引入screen / components / projectoverview 文件夹。

2、然后进行我们的三步走战略

A、引入
在这里插入图片描述
B、注册
在这里插入图片描述

C、作为标签使用
在这里插入图片描述

3、处理一些小细节

这样就差不多到结尾处啦 其实中间还有一步哦 就是定义一下我们的组件（or数据） 我的截图就放下面啦 记得看一下啊！！！
在这里插入图片描述
为什么进行这一步呢？是因为在我们引入的project overview组件里面，这个是它的数据嗷！我也把截图放下面啦！！！
在这里插入图片描述
这样就接触尾声啦！！！

番茄番茄番茄.
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue注册公共组件
weixin_34336292的博客
11-08 976
把公共组件注册在main.js里面,挂载到全局，整个文件夹的文件都能使用这个组件。首先新建公共组件，然后在main.js引入 main.js // 公共组件mask 公共组件取名可以加个com- import ComMask from '@/module/common/Mask' Vue.component('com-mask', Co...
vue全局注册公共组件方法
wuzhanhui0715的博客
03-07 1737
1.引入注册组件，在install方法中，调用Vue.componemt(‘组件自定义名’, 组件) // 该文件负责所有的公共的组件的全局注册 Vue.use import pageTools from './PageTools' export default { install(Vue) { // 注册全局的通用栏组件对象 Vue.component('pageTools', pageTools) } } 2.在main.js中注册使用 import Component
用vue构建项目笔记2（引入自定义头部组件）
风云的博客
07-14 1366
在vue页面中引入自定义组件
Vue中引入自定义公共组件方法(详细步骤)
qq_41497443的博客
07-16 1万+
公共组件使用场景：项目中若多个页面都显示有相同的区域内容，则该公共区域内容可以封装成公共组件进行使用
Vue中引入自定义公共组件方法以及步骤
李耀书
04-15 2413
什么是公共组件，公共组件的使用场景 项目中如果多个页面都显示有相同的区域内容，则该公共区域内容可以封装成公共组件进行使用。 步骤： 1、创建自定义公共组件，在src下的components目录中自定义创建需要的公共组件 2、在main.js文件中将组件挂载到全局范围内。 至于如何挂载…en。。。。。 // 注册全局组件 import mylist from './components/Home/MyList.vue' Vue.component('my-list', mylist) 就这样，就可以了
解决vue项目中某一页面不想引用公共组件app.vue的问题
10-14
在Vue.js开发中，我们经常将公共组件如头部导航、侧边栏等放在`app.vue`作为全局组件，这样在每个路由页面加载时都会自动引入。然而，有时我们需要某些特定页面（例如登录页面）不显示这些公共组件，以提供更简洁的...
vue 将页面公用的头部组件化的方法
11-30
这样，我们就完成了头部组件的定义和使用。每个页面都通过`header-item`组件显示自己的头部，并通过props传递相应的数据，如消息文本和返回链接。 在实际项目中，你可能还需要考虑更多的细节，例如添加样式、处理...
React Native之头部导航组件
02-23
为了实现一个自定义的头部导航栏，我们可以创建一个新的React组件，利用Flexbox布局来定位元素，并使用样式对象来自定义其外观。 首先，我们需要引入必要的库。在React Native中，我们可以使用`react-native-...
vue 引入公共css文件的简单方法(推荐)
08-28
需要注意的是，在组件中引入公共 CSS 文件可能会导致 index.html 文件的头部多出一个空的标签。 小结 在 Vue 项目中，引入公共 CSS 文件是非常重要的。我们可以使用三种方法来引入公共 CSS 文件，包括在入口 js ...
Nuxt3组件的使用与布局模板的学习源码
最新发布
03-26
例如，你可以使用`setup()`函数来定义组件的状态和响应式属性，以及`setup()`中的`return`对象来提供公共接口。 在Nuxt3中，组件可以分为全局组件和局部组件。全局组件是在`nuxt.config.js`中通过`components`配置...
vue封装公共头部组件（不同样式的头部组件HeaderTop）
qq_38388578的博客
03-26 7512
场景： 公共组件HeaderTop: 外部组件引入使用： 没有左右内容的组件引用
HTML引用公共组件
a_靖的博客
08-12 4719
QQ技术交流群173683866 526474645 欢迎加入交流讨论，打广告的一律飞机票 在test.html引用footer.html 效果图 代码 test.html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>引用demo&l...
Vue公共组件调用，公共头部实现自定义内容
Rux子兮的博客
06-22 1668
一、设置公共头部publicHeader.vue <template> <view> <view v-if="sign==0" class="head"> <view class="headText">测试1</view> </view> <view v-if="sign==1" class="head"> <view class="headText">{{parent}}<
前端多个vue项目公共组件的三种方法（推荐npm file引入）
热门推荐
milugloomy的博客
11-22 1万+
背景 目前很多公司的开发模式都是多个前端一个后端。笔者所在的公司就是这样，移动端前端的产品有两个，这两个产品有很多内容是相似的、甚至一样的。包括页面、样式、JS逻辑等。这样就想将这些公共部分封装成公共组件供这两个项目调用。 Vue很好的提供了单个项目公共组件的解决方案，包括组件复用、传参、监听、通讯、插槽等功能。但多个vue项目怎么使用公共组件呢。 这篇文章就来介绍前端多个vue项目公共组件的三种...
Vue中引用公共方法和公共组件
weixin_43254676的博客
04-26 1万+
vue中公共方法和公共组件的使用
JavaWeb（入门篇15）jsp导入header和footer公共页面的2种方法
半亩方糖
06-17 4181
一、导入公共页面的2种方法 1.使用jsp java代码 会自动找到需要的页面合并到代码的位置 java源码展示位合并，2个页面合并为一个 1.关键代码 <%@include file="../comment/hearder.jsp"%> 2.所有代码 <%-- 一、<%@ 的3种方法 2.include 包含页面（一般用于设置公共的头或者尾部） 这个jsp就是导入公共页面的实例，使用<%@include --%> <%@ page contentType="t
在全局引入公共组件
红色枫叶的博客
08-22 726
import modules from "./module"; // 引入自定义公共组件 Object.keys(modules).forEach(key => { const name = key.replace(/(\w)/, v => v.toUpperCase()); // 首字母大写 Vue.component(`${name}`, modules[key]); })...
用vue写以一个精美公共头部多级导航栏
09-20
要创建一个精美的公共头部多级导航栏，我们可以使用Vue的组件化开发方式。 首先，我们可以创建一个名为`Navbar`的Vue组件，用于显示头部导航栏。在`Navbar`组件中，我们可以定义数据属性用于存储导航栏的菜单项。每...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值