vue 组件4 组件的嵌套

最新推荐文章于 2023-06-06 23:14:45 发布
最新推荐文章于 2023-06-06 23:14:45 发布
阅读量146 收藏
点赞数 1
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/MCCLS/article/details/118900032
版权
本文介绍了Vue中组件的嵌套与注册过程，强调了组件定义的顺序和使用时的注意事项。通过一个实例展示了在学校组件中嵌套学生组件，并解释了如何在父组件中注册子组件。同时提到，组件需要在其被注册的地方使用，否则会导致找不到组件的错误。此外，还提及了在实际开发中，通常会有管理所有组件的顶级app组件。
摘要由CSDN通过智能技术生成

组件的嵌套：

 

小案例

在school组件中下定义一个子组件也就是说是,school里面包着一个student（子组件）

这样写是平级的

 

因为要把student作为school的子组件,就要在school上定义student,这边我们在school的创建上

增加一个属性components里面写子组件,但这边有先后顺序的问题

由于先后顺序的问题报错了

报错：在你初始化,之前，你还没有定义student

所以把student组件定义放在school组件定义之前就好了

 而在组件使用时

还像以前一样平级写的话

会报错:没有student 

因为你在vm上只注册了school,当你直接写student标签时,则就报错vm上不存在school

 

所以组件注册在哪就要在哪写组件

所以因为这边我们在school上注册了一个组件,所以我们要到school里面的template写上组件标签

发现没有报错,页面运行正常,并且,在组件中发生了嵌套

 

 

然后我们再定义一个hello组件,hello组件与school组件平级

 

 

这边提下,我们在开发的时候会定义一个app组件其实就是applicable的简写用与管理应用里所有的组件

也就是app组件担当着一人之下万人之上的角色

 

所以我们下面定义一个app组件实现这样一个效果

可以发现app组件中,没有数据像是一个领导者

由于app上面只有vm所以在vm上只有一个组件就是app

 所以在上面只要写app就行了

如果容器里啥也不想写,就写在vm的template里

一般标准化开发都得这样写嵌套

 

 

 

 

 

 

 

 

 

 

 

兜里揣着星星
关注
Vue 组件嵌套
weixin_53037175的博客
10-08 207
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <div id="app"> <login></login> </div> <template id="login">
Vue组件嵌套
xing942012的博客
12-04 1106
这个就类似于无限套娃，一层一层的，写个实例看的更清楚一些 首先不要忘了引入vue.js // 创建student组件 const student = Vue.extend({ template:` <div> <h2>{{studentName}}</h2> <h2>{{age}}</h2> </div>`, data(){ return{ student
Vue之组件嵌套
qq_40837310的博客
02-13 1622
简介 主要讲解组件时如何嵌套的。 组件嵌套类似于一个组件里面注册了另外一个组件，存在父子关系 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件嵌套</title> </head> <body> <div id="root"> <school></s
Vue中的组件嵌套
虎康的博客
02-12 976
今天完成的是一个组件嵌套功能，实现的是如下效果，其中school1 与school2是同级关系 我是这么想的：先用app去接管vm中的所有组件，app中有school1组件和school2组件，然后在school1中嵌套student，student组件中嵌套hello 在解决组件school1与schoo2同级关系时，控制台报了如下错误，奇奇怪怪的错误让我school1与school2不能同时出现 在经过理解转化之后，修改代码前后对比如下【后者为正确代码】 话不多说，直接上代码理.
Vue自定义组件——非单文件组件
cc_xxo的博客
02-26 333
使用 component 或 components <div id="root"> <h1>{{msg}}</h1> <school></school> <hr /> <student></student> <hello></hello> </div> <hr /> <div id="root2"> <hello></hel
Vue 多层组件嵌套二种实现方式(测试实例)
08-29
Vue 多层组件嵌套二种实现方式 Vue 是一个基于组件的前端框架，它提供了灵活的组件嵌套机制，允许开发者自由地组合和嵌套组件以实现复杂的界面布局。下面我们将讨论 Vue 多层组件嵌套二种实现方式。 实现方式一：...
使用form-create动态生成vue自定义组件和嵌套表单组件
10-17
在本文中，我们将深入探讨如何使用`form-create`来动态生成vue自定义组件和嵌套表单组件。 首先，`form-create`的核心在于`maker`对象，它提供了一系列的方法来创建不同类型的组件。例如，`maker.create()`可以用来...
vue深层组件嵌套传值.md
07-26
在父组件A 里 引入了子组件B , 但同时B组件又是子组件C的父组件,C又是子组件D的父组件 那么, A组件分别向B ,C ,D传值是如何实现的? D组件又是如何分别向C B A 传值的
vue/组件嵌套/无限嵌套/嵌套组件消息传递/嵌套父子组件传值
fireInNight的博客
03-19 7286
目前接到一个需求，是我之前从来没有实践过的，正好趁此机会做一个深度剖析，并记录下这次的成长，并分享给大家。 需求文档: 一 、（一个厂商编号和一个版本号）唯一决定一个配置 二 、 配置内容支持**无限嵌套** 三、配置数据格式示例（配置包括项和模块） ...
vue父子组件的嵌套的示例代码
08-29
现在，让我们来看一个父子组件嵌套的示例代码。首先，我们定义一个子组件 `child`，然后在父组件 `parent` 中使用它： ```html <!DOCTYPE html> <title>index <parent></parent> <script src="vue.js">...
vue组件中实现嵌套子组件案例
10-14
主要介绍了vue组件中实现嵌套子组件案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue-组件的嵌套
见证自己学习,成长的记录
05-30 2958
在vue开发中，组件的嵌套也是会被经常使用到的，所以也应该掌握。
VUE组件的嵌套
m0_46505467的博客
11-04 720
定义有getter和setter的计算属性。默认只有getter的计算属性。监听data中属性的改变。
vue 组件以字符串插入_vue3多层嵌套组件如何访问到最外层组件的数据？
weixin_39640904的博客
11-22 231
我们都知道在vue中父组件向子组件传参需要在组件使用的位置使用属性绑定的方式,然后在子组件中通过props接收父组件中传递过来的数据,如果涉及到多层组件嵌套我们需要涉及到好多次属性绑定和好多次props接收数据,导致代码维护较差,我们知道可以借助vuex实现状态管理,今天我们来使用一下在vue3中提供的provide和inject来实现数据的传递.我们定义一个父组件father.vue,定义一个子...
Vue之-组件-组件嵌套
qq_67801847的博客
08-11 2408
组件本质是一个VueComponent的构造函数，且不是程序员定义的，由Vue.entend生成。1.创建组件：const a=Vue.extend ({}）每次调用Vue.entend时就会返回一个全新的VueComponent。3.引用组件：直接调用组件名称作为标签即可。全局配置组件： Vue.() 注意不加s。...............
vue组件嵌套（初学者超简单，一看就懂）
weixin_60941411的博客
11-22 5480
（1）组件的上一层级是vm实例，因此app组件在new VUe里面注册。组件的上一层级是vm实例，因此app组件在new VUe里面使用。（2）和组件的上一层级是组件（2）和组件的上一层级是组件（3）组件的上一层级是（3）组件的上一层级是
Vue-组件嵌套、组件CSS样式、多组件嵌套、组件传值、传值和传引用、多个单文件组件路由的使用
NeilNiu
12-31 2630
App.vue是父组件，components下面的是子组件 组件嵌套包括，全局组件和局部组件 一般使用的是局部组件，使用方式是， 1、引用组件 2、注册组件 3、使用组件 新建一个Users.vue 子组件， <template> <div class="Users"> <ul> <li v-for="(user, index) in users" :key="index">{{ user }}</li>
【Vue】三：Vue组件: 组件使用和组件嵌套
北极星的博客
06-06 1601
（1）创建Vue组件的时候，不能使用el配置项。但是需要使用template配置项来配置模板语句。（2）配置项中的data，不能直接使用对象形式，要使用function。直接使用类似使用html标签。
vue 组件嵌套乱码
最新发布
10-20
在Vue组件嵌套时，如果不使用v-cloak和[v-cloak] { display: none }一起使用，可能会出现数据延时出现的乱码。这是因为Vue在渲染组件时，会先将组件模板编译成渲染函数，然后再执行渲染函数生成虚拟DOM，最后再将...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值