Vue3组件化开发(一)

本文探讨了Vue3中的组件拆分与嵌套,详细解析了如何处理组件的CSS作用域问题,以及父子组件间的通信。重点介绍了通过props传递数据的不同方式,包括数组和对象的用法,并讲解了非prop属性的传递以及子组件如何向父组件通信的两种方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

组件的拆分和嵌套

这个我也不知从何写起,就这样拆分,引用。

细节补充在引入其他组件时,加后缀。虽然不加后缀,vue-cli会帮我们处理好,但是不能帮我们快速定位到导入的文件内部。ctrl + 鼠标点击进入文件。

组件的CSS作用域问题

Vue提供了 scoped 属性,它的实际实现是给本组件内的每个标签添加上了一个相同的属性,并在设置样式时加入了 属性选择器。若子组件有,那么根元素将会有俩个vue设置的属性。

image-20210610235544559

image-20210610235613889

组件通信(父传子)

props的数组用法

若没有 v-bind绑定,也可以传值过去,但是传的就是跟着的字符串,并不会查找响应式系统里面的值。

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值