组件学习笔记

最新推荐文章于 2024-07-25 11:17:07 发布

xxf2

最新推荐文章于 2024-07-25 11:17:07 发布

阅读量93

点赞数

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.csdn.net/g7778/article/details/121215645

版权

3 篇文章 0 订阅

订阅专栏

创建组件 —》在要用到组件的页面中的对应的json 中注册 ----》在页面中使用

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-VV7IQrkm-1636374879400)(C:\Users\A\AppData\Roaming\Typora\typora-user-images\image-20211108164025233.png)]$
组件中wxss 最好只使用class 类名来修改样式,通过其它的方式修改无效

2给组件传值
```
properties: {
  title:String // 两种都可以
  title:{
   type:String,
   value:'默认标题'
  }
 },
```

给组件传一个类

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ieFJFLDK-1636374879406)(C:\Users\A\AppData\Roaming\Typora\typora-user-images\image-20211108165854517.png)]$

在组件中声明好

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Trrp9CQ3-1636374879411)(C:\Users\A\AppData\Roaming\Typora\typora-user-images\image-20211108170120771.png)]$

在组件的页面中使用
在这里插入图片描述

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QSQEq4dW-1636374879417)(C:\Users\A\AppData\Roaming\Typora\typora-user-images\image-20211108170848019.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-FtNoopV4-1636374879420)(C:\Users\A\AppData\Roaming\Typora\typora-user-images\image-20211108171136250.png)]$

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aqQtP0Jt-1636374879422)(C:\Users\A\AppData\Roaming\Typora\typora-user-images\image-20211108174128217.png)]$

1单个插槽的使用

在自定义组件的代码

 <view>我是组件头部</view>
<slot></slot>
<view>我是组件尾部</view>

用到的页面的对应代码

<my-slot>

 <button>我是中间部分</button>

 <view>1777777</view>

 <text>78941</text>

</my-slot>

效果图

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Qkf4TiXj-1636374879424)(C:\Users\A\AppData\Roaming\Typora\typora-user-images\image-20211108175126533.png)]$

2 多个插槽的使用

注意事项：

1 给每一个插槽取一个名字，使用时使用slot=“取的名字”

2 $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XJqS9i7X-1636374879427)(C:\Users\A\AppData\Roaming\Typora\typora-user-images\image-20211108180500033.png)]$

组件代码
在这里插入图片描述

使用组价的代码

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0fyx2Dn6-1636374879432)(C:\Users\A\AppData\Roaming\Typora\typora-user-images\image-20211108180704659.png)]$

效果图

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DgQsyQkR-1636374879435)(C:\Users\A\AppData\Roaming\Typora\typora-user-images\image-20211108180726077.png)]$

关注