【6 微信小程序学习 - 小程序的组件化开发,通信】

最新推荐文章于 2024-08-07 21:00:00 发布

努力修福报

最新推荐文章于 2024-08-07 21:00:00 发布

阅读量1.3k

点赞数

分类专栏：微信小程序学习笔记文章标签：微信小程序小程序学习

本文链接：https://blog.csdn.net/qq_31421983/article/details/131114086

版权

本文详细介绍了微信小程序的组件化开发，包括如何创建和使用组件，强调了组件的样式细节和通信方式。重点讲解了父传子的properties、组件自定义事件、页面直接调用组件方法以及插槽的使用。同时，提到了behaviors用于共享数据和函数，以及Component构造器的配置选项。

摘要由CSDN通过智能技术生成

1 小程序组件化开发

在这里插入图片描述

1,在根目录创建components文件夹,自定义组件都放在此处
2,右键新建component,输入名称后悔创建四个文件
3.其中.json中的"component": true,表示这是一个组件
4,编写代码,和其他代码逻辑相同

在这里插入图片描述

1,要使用组件的父组件的json配置文件,usingComponents字段注册组件,组件名称:组件路径

{
  "usingComponents": {
    "section-info": "/components/section-info/section-info",
  }
}
wxml中使用组件
<section-info />

在这里插入图片描述

1 外部使用了标签选择器，会对组件内产生影响,所以建议不要使用标签选择器
2 自定义组件之间样式默认是隔离的,要使父组件和子组件的样式互相影响(比如使用统一类名设置样式),要在父组件.js中使用styleIsolation属性,

在这里插入图片描述

Component({
   
  options: {
   
    styleIsolation: "shared"
  }
})

在这里插入图片描述

1 父组件创建子组件时传递数据.wxml

<!-- 2.自定义组件 section-info -->
<section-info 
  title="我与地坛" 
  content="要是有些事情我没说, 别以为是我忘记了"
/>

关注

专栏目录