如何在vue页面中引入其他的子组件？(局部引入/全局引入)

于 2021-09-30 13:51:38 发布 43084 收藏 13
分类专栏： 前端实战知识集锦 文章标签： 其他 vue.js javascript 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53072519/article/details/120561568
版权

        在页面中引入子组件分为局部引入和全局引入，局部引入顾名思义就是只在当前页面引入且只在当前页面显示，全局引入即引入后在所有页面都显示。

        首先我们创建两个页面Test.vue和Tset2.vue；

        起始效果如下：

        接下来创建一个头部子组件，

 局部引入：

        此处将头部子组件引入Test.vue页面中；如下图：

页面显示效果如下：只有Test.vue页面显示该头部子组件。
 

 全局引入：

        在src/main.js中； 

页面显示效果如下：

 

敬 之
关注
  • 8
    点赞
  • 踩
  • 13
    收藏
  • 打赏
    打赏
  • 3
    评论
专栏目录
vue父组件引入子组件，以及父子组件之间得值传递
weixin_45023621的博客
06-30 358
父组件引入子组件 创建子组件 在父组件的script中引入子组件 在父组件中export default 添加components属性 在父组件中添加一个标签引入子组件 父组件向子组件传值 在子组件的export default中定义props属性来接收父组件传过来的变量 在父组件的data中定义要传递的值 在子组件的标签中传递值 在子组件中接收值 子组件向父组件传值 在子组件创建一个方法，并调用this.$emit创建一个自定义事件 在子组件中添加一个按钮触发调用子组件定义的方法 在父组件中
Vue在一个组件引入另一个组件
boboerer157的博客
10-25 1404
VSCODE ：Vue在一个组件引入另一个组件 目录 //1.引入写好的组件 import Test4 from ‘…/components/Test4’ //2.映射组件（在components里面引入import的组件） components:{ Test4 } //3.在template里面加上组件 效果图 ![在这里插入图片描述](https://im...
vue怎么引入全局方法（前端小白必看！）
最新发布
weixin_44490057的博客
11-21 561
mixin是什么？怎么用？前端新手上车
vue怎么引入子组件
qq_37916164的博客
12-12 2866
第一步：例子是在aboutUs.vue界面引入子组件sideFloating.vue，如下图 第二步：给子组件sideFloating.vue命名一个全局的id <script type="text/ecmascript-6"> export default { name:'indexFloating', } </script> ...
vue中组件拆分 父组件中如何插入一个子组件
鹏仔工作室的秘密基地
08-13 836
首先在src下建立文件夹 components ，在里面随意创建一个子组件vue文件（我创建了一个childer.vue），创建好以后，编写子组件的内容。 在父组件中，我们首先引入需要的子组件文件 import childer from './components/childer'; 接着注册 export default { name: 'app', data () { return { } }, components:{ childer: chil.
在VUE中，父组件如何引入子组件？
第一千行代码的博客
02-16 640
vue引入子组件
qq_26337713的博客
11-05 1133
1.组件关系 父组件：HelloWorld 子组件：mytabel 2.先给子组件起名 name: 'mytabel' 3.在父组件引入子组件，执行图片中的1至3步 ①.引入组件 import mytabel from './mytabel' ②注册组件 components:{mytabel}, ③使用组件 <mytabel></mytabel> ...
vue父页面调用子页面方法
qq_34631220的博客
02-26 5312
1、子页面，文件名MapContainer.vue <template> <div class="box"> <div style="position: absolute;z-index: 10;cursor:pointer" @click="animates()"></div> </div> </template> <script> export default { data() { retu
vue 父组件中调用子组件的方法
qq_29236119的博客
02-02 721
Vue项目中如何在父组件中直接调用子组件的方法： 方案一：通过ref直接调用子组件的方法； //父组件中 <template> <div> <Button @click="handleClick">点击调用子组件方法</Button> <Child ref="child"/> </div> </template> <script> import Chil
VUE 俩种方式引入子组件方式携带参数打开子页面
liuchenhaoy的博客
10-12 355
VUE 两种方式引入子组件方式 携带参数打开/载入子页面
Vue——子组件中引入父组件
六耳石猴的博客
12-07 1020
场景 因为特殊情况，开发中子组件又需要引入父组件，即子组件中再创建一个父组件的Vue实例。 比如一个展示组件Rack，内部有一个子组件RackDialog，然后RackDialog里又需要引入Rack组件 问题 使用常用的组件引入注册方式在RackDialog组件中引入Rack import Rack from "Rack.vue" export default { components: { Rack } } 上面的方式运行时会报错组件未注册 解决方案 使用异步组件引入方式，即在RackDia
vue如何在一个组件中引用另外一个组件并使用?有两种方法
热门推荐
msn-06-s
02-03 6万+
方法一:代码如下 //1.先使用import导入你要在该组件中使用的子组件 import testComponent from './testComponent.vue' export default { //2.然后,在components中写入子组件 components:
vue环境下一个主页面引入多个子组件的方法
ColourfulTiger的博客
09-06 1万+
通常我们使用的是单个文件引入，但是这样就会有很多代码是重复的，怎样才能实现“按需“引入呢？ 1、常见的引入单个vue文件的写法：import Header from '@/view/layout/Header';   2、实现”按需“引入的写法： ”按需“引入多个vue文件的写法：import {Header,Footer,Content} from '@/view/layout'; ...
怎样在vue单页面中引入其他组件
BADAO_LIUMANG_QIZHI的博客
11-27 5996
场景 在一个vue的单页面，假如是home.vue中要引入其他组件的内容。 页面结构如下： 实现 首先在components下新建组件Today_recommend.vue组件 &lt;template lang="html"&gt;   &lt;div class=""&gt;   今日推荐   &lt;/div&gt; &lt;/template&gt; &lt;script
Vue中父组件调用子组件的方法
BADAO_LIUMANG_QIZHI的博客
11-26 4704
场景 SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图： SpringBoot+Vue+Echarts实现选择时间范围内数据加载显示柱状图_BADAO_LIUMANG_QIZHI的博客-CSDN博客 在上面的博客页面是父组件，时间选择器是父组件的标签，柱状图是引用的子组件。 实现在父组件选择时间后调用子组件的方法重新渲染柱状图。 注： 博客：BADAO_LIUMANG_QIZHI的博客_霸道流氓气质_CSDN博客-C#,SpringBoot,架构之路领域博
vue中组件引入
flyf123的博客
02-24 9732
vue的一个强大功能就是组件化开发，那么组件如何引入到页面中呢，今天就带大家一起了解一下 第一种方式：在页面单独引入 在script标签内部导入组件 import login from './components/Login' 在components中注册组件 components:{ login }, 最后就可以在页面中使用了 <login></login> 第二种方式：在全局注册组件 在components文件夹下新建一个index.js文件 在
vue引入组件
gc1329689056的博客
06-13 2936
1、先import组件位置 2、在components中注册该组件 3.在template中以标签的方式插入组件 注意:如果以驼峰命名法，则以标签使用时驼峰需要小写例如: 注册的组件名为TabBar 则，使用时应为引入全局echarts1.安装echarts 2.在main.js中导入echarts 3. 挂载到vue实例中 4.在组件中使用...
Vue 组件引入 九
weixin_34280237的博客
09-30 87
2019独角兽企业重金招聘Python工程师标准>>> ...
vue页面引入多个组件的方法
dev_zx的博客
06-17 3436
通常我们使用的是单个文件引入，但是这样就会有很多代码是重复的，怎样才能实现vue页面引入多个组件的方法？ 1. 把需要引入的文件放入到components文件夹中。 2. 将components中的文件引入到index.js中。 index.js export { default as A } from "./a.vue" export { default as B } from "./b.vue" export { default as C } from "./c.vue" 3. 在home.vu
Vue父组件调用子组件的方法（ref）
qq_42786138的博客
05-12 4353
vue中如果父组件想调用子组件的方法，可以在子组件中加上ref， 然后通过this.$refs.ref.method调用，例如： 父组件： <template> <div @click="fatherMethod"> <child ref="child"></child> </div> </template> <script> import child from '~/components/dam/...

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题：Age of Ai 设计师：meimeiellie 返回首页
评论 3

打赏作者

敬 之

您的鼓励就是我创作的动力~

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额：-- )
扫码支付
扫码支付：¥2
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值