在页面中引入子组件分为局部引入和全局引入，局部引入顾名思义就是只在当前页面引入且只在当前页面显示，全局引入即引入后在所有页面都显示。
首先我们创建两个页面Test.vue和Tset2.vue；
起始效果如下：
接下来创建一个头部子组件，
局部引入：
此处将头部子组件引入Test.vue页面中；如下图：
页面显示效果如下：只有Test.vue页面显示该头部子组件。
全局引入：
在src/main.js中；
页面显示效果如下：
如何在vue页面中引入其他的子组件？(局部引入/全局引入)
2022-04-12
603
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
如何在vue页面中引入其他的子组件？(局部引入/全局引入)
目录
相关文章
|
3天前
|
JavaScript
|
3天前
|
JavaScript
|
3天前
|
JavaScript
|
4天前
|
JavaScript
前端开发
|
3天前
|
JavaScript
|
JavaScript
测试技术
容器
Vue2+VueRouter2+webpack 构建项目
1). 安装Node环境和npm包管理工具
检测版本
node -v
npm -v
图1.png
2). 安装vue-cli(vue脚手架)
npm install -g vue-cli --registry=https://registry.
1039
0
0
|
5天前
|
JavaScript
|
19小时前
|
JavaScript
理解 Vue 的 setup 应用程序钩子
【10月更文挑战第3天】`setup` 函数是 Vue 3 中的新组件选项，在组件创建前调用，作为初始化逻辑的入口。它接收 `props` 和 `context` 两个参数，内部定义的变量和函数需通过 `return` 暴露给模板。`props` 包含父组件传入的属性，`context` 包含组件上下文信息。`setup` 可替代 `beforeCreate` 和 `created` 钩子，并提供类似 `data`、`computed` 和 `methods` 的功能，支持逻辑复用和 TypeScript 类型定义。
19
11
11
|
4天前
|
JavaScript
前端开发
IDE
|
4天前
|
JavaScript
前端开发
API
热门文章
最新文章
1
vite 如何做到让 vue 本地开发更快速？
2
VUE element-ui之form表单中input输入超过规定长度error提醒，并实时显示输入长度，可无限输入
3
【第12期】Vue3+TypeScript+Vite中动态引入图片等静态资源
4
基于Vue和SpringBoot的电商管理系统的设计与实现（一）
5
前端vue给后端list集合对象传值
6
VUE组件：如何在Vue中实现组件的动态引入？
7
Vue3 自定义指令实现元素点击的节流与输入框的防抖,后端老哥再也不用担心我频繁发送请求了
8
Vue 父子组件通信 兄弟组件通信 深层组件通信 方式一览
9
vue后台管理系统小功能
10
Vue —— 基础（二）（计算属性、监听属性）
1
【vue的技术要点】
78
2
【vue2中引入阿里第三方图标库使用自定义的Ant Design Vue组件a-cascader级联选择后缀图标】
394
3
在vue中，在哪个生命周期内调用异步请求？
251
4
在vue中，Vue 的父组件和子组件生命周期钩子函数执行顺序？
64
5
在vue中，直接给一个数组项赋值，Vue 能检测到变化吗？
206
6
在vue中，computed 和 watch 的区别和运用的场景？
64
7
在vue中，怎样理解 Vue 的单向数据流？
60
8
在vue中，Class 与 Style 如何动态绑定？
44
9
在vue中，v-show 与 v-if 有什么区别？
40
10
在vue中，如何实现SPA单页面应用的路由管理？
58