vue 组件4 组件的嵌套

最新推荐文章于 2023-05-30 19:31:29 发布
原创 最新推荐文章于 2023-05-30 19:31:29 发布 · 192 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue

本文介绍了Vue中组件的嵌套与注册过程，强调了组件定义的顺序和使用时的注意事项。通过一个实例展示了在学校组件中嵌套学生组件，并解释了如何在父组件中注册子组件。同时提到，组件需要在其被注册的地方使用，否则会导致找不到组件的错误。此外，还提及了在实际开发中，通常会有管理所有组件的顶级app组件。

组件的嵌套：

 

小案例

在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 的深度嵌套组件优化：减少性能瓶颈与实现组件解耦
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
12-18 1296
深度嵌套的 Vue 组件可以提高代码的模块化和可维护性，但也可能带来性能问题。通过使用v-show、懒加载、keep-alive等优化策略，我们可以有效地减少不必要的渲染和计算，提升应用性能。实现组件解耦，利用 Vuex 或事件总线进行数据和事件的管理，不仅提升了性能，也使得代码更加易于维护和扩展。通过 Vue DevTools 等调试工具，及时发现性能瓶颈，从而进行针对性优化，确保应用始终保持高效的运行。
Vue组件化编程3：组件的嵌套、VueComponent构造函数
casually的博客
12-13 1459
以上就是组件的嵌套、VueComponent构造函数的全部内容，这对于我们以后Vue项目开发很有帮助，要好好理解理解。
Vue 多层组件嵌套二种实现方式(测试实例)
08-29
本篇文章主要介绍了Vue组件嵌套二种实现方式(测试实例)，具有一定的参考价值，代码很简单，感兴趣的小伙伴们可以参考一下
vue组件中实现嵌套子组件案例
10-14
主要介绍了vue组件中实现嵌套子组件案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue 组件嵌套
weixin_53037175的博客
10-08 268
<!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 1174
这个就类似于无限套娃，一层一层的，写个实例看的更清楚一些 首先不要忘了引入vue.js // 创建student组件 const student = Vue.extend({ template:` <div> <h2>{{studentName}}</h2> <h2>{{age}}</h2> </div>`, data(){ return{ student
使用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父子组件的嵌套的示例代码
08-29
现在，让我们来看一个父子组件嵌套的示例代码。首先，我们定义一个子组件 `child`，然后在父组件 `parent` 中使用它： ```html <!DOCTYPE html> <title>index <parent></parent> <script src="vue.js">...
Vue之组件嵌套
qq_40837310的博客
02-13 1739
简介 主要讲解组件时如何嵌套的。 组件嵌套类似于一个组件里面注册了另外一个组件，存在父子关系 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件嵌套</title> </head> <body> <div id="root"> <school></s
Vue中的组件嵌套
虎康的博客
02-12 1088
今天完成的是一个组件嵌套功能，实现的是如下效果，其中school1 与school2是同级关系 我是这么想的：先用app去接管vm中的所有组件，app中有school1组件和school2组件，然后在school1中嵌套student，student组件中嵌套hello 在解决组件school1与schoo2同级关系时，控制台报了如下错误，奇奇怪怪的错误让我school1与school2不能同时出现 在经过理解转化之后，修改代码前后对比如下【后者为正确代码】 话不多说，直接上代码理.
Vue自定义组件——非单文件组件
cc_xxo的博客
02-26 382
使用 component 或 components <div id="root"> <h1>{{msg}}</h1> <school></school> <hr /> <student></student> <hello></hello> </div> <hr /> <div id="root2"> <hello></hel
Vue-组件的嵌套
见证自己学习,成长的记录
05-30 3136
在vue开发中，组件的嵌套也是会被经常使用到的，所以也应该掌握。
VUE组件的嵌套
m0_46505467的博客
11-04 815
定义有getter和setter的计算属性。默认只有getter的计算属性。监听data中属性的改变。
vue 组件以字符串插入_vue3多层嵌套组件如何访问到最外层组件的数据？
weixin_39640904的博客
11-22 278
我们都知道在vue中父组件向子组件传参需要在组件使用的位置使用属性绑定的方式,然后在子组件中通过props接收父组件中传递过来的数据,如果涉及到多层组件嵌套我们需要涉及到好多次属性绑定和好多次props接收数据,导致代码维护较差,我们知道可以借助vuex实现状态管理,今天我们来使用一下在vue3中提供的provide和inject来实现数据的传递.我们定义一个父组件father.vue,定义一个子...
Vue之-组件-组件嵌套
qq_67801847的博客
08-11 2504
组件本质是一个VueComponent的构造函数，且不是程序员定义的，由Vue.entend生成。1.创建组件：const a=Vue.extend ({}）每次调用Vue.entend时就会返回一个全新的VueComponent。3.引用组件：直接调用组件名称作为标签即可。全局配置组件： Vue.() 注意不加s。...............
vue组件嵌套（初学者超简单，一看就懂）
weixin_60941411的博客
11-22 5814
（1）组件的上一层级是vm实例，因此app组件在new VUe里面注册。组件的上一层级是vm实例，因此app组件在new VUe里面使用。（2）和组件的上一层级是组件（2）和组件的上一层级是组件（3）组件的上一层级是（3）组件的上一层级是
Vue-组件嵌套、组件CSS样式、多组件嵌套、组件传值、传值和传引用、多个单文件组件路由的使用
NeilNiu
12-31 2769
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组件嵌套事件冒泡
最新发布
08-26
在 Vue 框架中，组件嵌套时的事件冒泡问题可以通过事件修饰符和自定义事件的合理使用来处理。Vue 提供了 `.stop` 修饰符来阻止事件冒泡，类似于原生 JavaScript 中的 `event.stopPropagation()`，可以防止事件从子组件向父组件传播[^1]。 例如，在子组件的事件处理中使用 `.stop` 修饰符： ```vue <template> <button @click.stop="handleClick">点击我</button> </template> <script> export default { methods: { handleClick() { console.log("子组件的点击事件"); } } }; </script> ``` 通过这种方式，点击子组件的按钮时，事件不会冒泡到父组件。 如果需要在组件间进行通信，Vue 推荐使用自定义事件。父组件可以通过 `props` 向子组件传递数据或回调函数，而子组件则可以通过 `$emit` 触发事件并传递数据给父组件。这种方法可以避免直接依赖事件冒泡来传递信息，从而提高组件的可维护性和可测试性[^2]。 例如，子组件触发一个自定义事件： ```vue <template> <button @click="handleClick">点击我</button> </template> <script> export default { methods: { handleClick() { this.$emit("child-event"); } } }; </script> ``` 父组件监听该事件并处理： ```vue <template> <child-component @child-event="handleChildEvent" /> </template> <script> import ChildComponent from "./ChildComponent.vue"; export default { components: { ChildComponent }, methods: { handleChildEvent() { console.log("子组件触发的事件"); } } }; </script> ``` 通过这种方式，父组件可以直接响应子组件的事件，而不必担心事件冒泡带来的副作用。 此外，Vue 还提供了 `.self` 修饰符，用于确保事件仅触发当前元素自身的事件处理程序，而不会影响到子元素。这对于避免子元素的事件干扰父组件的逻辑非常有用。 例如： ```vue <template> <div @click.self="handleDivClick"> <button>点击我</button> </div> </template> <script> export default { methods: { handleDivClick() { console.log("只有点击到 div 时才会触发"); } } }; </script> ``` 在上述代码中，只有当点击发生在 `div` 元素上时，`handleDivClick` 方法才会被调用，点击 `button` 不会触发该事件。 通过合理使用这些事件修饰符和自定义事件，可以有效处理 Vue 组件嵌套时的事件冒泡问题，同时保持代码的清晰和可维护性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值