学习
实践
活动
工具
TVP
写文章
专栏首页柠檬先生小程序 组件 Component

小程序 组件 Component

一.组件模板和样式

类似于页面,自定义组件拥有自己的 wxml 和模板 wxss 样式。

1.组件模板

组件的写法和页面的写法相同,组件模板与组件数据结合后生成的数节点,

将被插入到组件的引用位置。在组件模板中提供一个<slot> 节点,用于承载组件

引用时候提供的子节点。

例如:

<view class="wrapper">

<view>这里是组件的内部节点</view>

<slot></slot>

</view>

引用在页面的.json 文件中配置。

"usingComponents": {

"v-component": "/components/cs/cs"

}

"v-component" :为自定义的模板名字,页面引用的时候用,

"/components/cs/cs" 引用组件的路径

页面中引用 如下:

<v-component>

<view>这里是插入到组件slot中的内容</view>

</v-component>

2.组件中的模板数据绑定

与普通的模板数据绑定相同,动态像子组件传递数据。

例如:

<v-component prop-a="{{dataA}}" prop-b="{{dataB}}">

<view>这里是插入到组件slot中的内容</view>

</v-component>

组件接收到页面传递过来的数据,页面可以通过setData 来改变绑定的绑定字段。

(目前只能传递JSON数据)

3.组件的wxml 的slot

默认情况下,一个组件的wxml 中只能有一个slot,需要使用多个slot 时,可以在组件js

声明启用。

Component({

options:{

multipleSlots: true // 在组件定义的选项中启用多slot 支持

},

properties:{},

methods:{}

})

此时在组件就可以启用多个slot,以不同的name 来区分。

例如:

<view class="wrapper">

<slot name=“head”></slot>

<view>这里是组件的内部节点</view>

<slot name="footer"></slot>

</view>

在使用的时候

<v-component >

<view slot="head">slot中的头部内容</view>

<view slot="footer">slot中的底部内容</view>

</v-component>

4.组件样式

组件对应wxss 文件的样式,只对组件wxml 内的节点生效。编写组件样式时注意:

(1) 组件和引用的页面,不能使用id选择器,(#a),属性选择器([a])和标签名属性

选择器,请改用class 选择器。

(2) 组件和引用组件的页面中使用后代选择器(.a .b) 在极端情况下会有非预期的表现。

(3)子元素选择器(.a>.b) 只能用于view 组件与其子节点之间,用于其他组件可以能导致

非预期的情况。

(4)继承样式,如font , color 会从外部组件继承到组件内。

(5)除继承样式外,app.wxss 中的样式,组件所在页面中的样式对自定义样式无效。

(6)组件可以指定节点的默认样式 :host{color:yellow;}

5.外部样式

组件接收外部传入的样式类,可以在Component 中用externalClasses 定义若干个外部样式

类,这个特性可以用实现类似于,view 组件的 hover-class属性,页面可以提供一个样式类

赋予 view 的hover-class 这个一样式类写在页面中,而非, view 组件的实现中。

例如:

/* 组件 custom-component.js */

Component({

externalClasses:['my-class']

})

<!-- 组件 custom-component.wxml -->

<v-component class="my-class" >

这段文本的颜色由外部组建的 class 觉得

</v-component>

组件的使用或者可以指定这个样式类对应的class, 就像使用普通属性样式一样

页面的WXML

<v-component my-class="red-text"></v-component>

.red-text{

color:red;

}

6.使用组件接收全局样式

默认情况下,自定义组件的样式只受到wxss 的影响

(1) app.wxss 中使用了标签名选择器,影响到页面和全部组件,

(2) 在自定义的组件中激活了 addGlobalClass 选项,这样使自定义

组件能被app.wxss 或页面的wxss 中的所有样式。

要激活 addGlobalClass 选项,只需在Component 构造中将 options.addGlobalClass

字段为true (当激活了 addGlobalClass 选项后,存在外部样式污染样式组件的风险)

/* 组件 custom-component.js */ Component({ options: { addGlobalClass: true, } })

/* 组件 custom-component.wxml */

<text class="red-text">

这段文字颜色由 `app.wxss`和页面`wxss` 中的样式定义来规定

</text>

/*app.wxxs*/

.red-text{

color:red;

}

本文参与 腾讯云自媒体分享计划 ,欢迎热爱写作的你一起参与!
本文分享自作者个人站点/博客:https://www.cnblogs.com/nmxs复制
如有侵权,请联系 cloudcommunity@tencent.com 删除。
登录 后参与评论
0 条评论

相关文章

  • 百度小程序自定义组件component

    "searchs": "/components/searchInput/searchInput",

    用户3055976
  • 【愚公系列】2022年02月 微信小程序-Component组件

    愚公搬代码
  • 【愚公系列】2022年02月 微信小程序-Component组件的关系

    愚公搬代码
  • 【愚公系列】2022年02月 微信小程序-Component组件的扩展

    通过例子可以发现,自定义组件的扩展其实就是提供了修改自定义组件定义段的能力,上述例子就是修改了自定义组件中的 data 定义段里的内容。

    愚公搬代码
  • 小程序子组件向父组件传值_小程序组件通信

    需要在子组件处添加 bind:traCheckedNum=”checkNum” checkNum是父js中的方法

    全栈程序员站长
  • vue动态组件component原理_component注解

    使用is来绑定你的组件:如下面的reviewedPlan planDetailsList attachmentList等引入的组件名

    全栈程序员站长
  • 小程序基础-组件

    ⽂本的<text>组件、表示图像的<image>组件、表示视图容器的 <view>组件,表示链接的<navigator>组件

    达达前端
  • 【愚公系列】2022年02月 微信小程序-Component组件的通信与事件

    事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件,引用组件的页面可以监听这些事件。

    愚公搬代码
  • 小程序弹框组件_小程序怎么创建

    看了以上3种弹框,发现和我们Ui差距较大,都用不上。于是我自己写一个我的页面专用的弹框,具体效果如下图:

    全栈程序员站长
  • 「小程序JAVA实战」小程序导航组件(26)

    PS:这个就是页面跳转的实践,navigate这个标签还是特别重要的,因为在实际开发过程中,页面跳转还是非常的多的。

    IT架构圈
  • 小程序搜索组件wxSearch

    一、功能  支持自定义热门key  支持搜索历史  支持搜索建议  支持搜索历史(记录)缓存  二、使用  1、将wxSearch文件夹整个拷贝到根目录下  2...

    极乐君
  • 小程序转盘抽奖组件

    别盯着我的名字看
  • 小程序<mlvb-live-room> 组件采坑

    小程序<mlvb-live-room>是使用了live-pusher、live-player标签和IM sdk组成的一个适用于连麦互动的小程序直播组件。使用这个...

    黑眼圈云豆
  • 【愚公系列】2022年02月 微信小程序-Component组件的数据监听器

    例如, this.data.sum 永远是 this.data.numberA 与 this.data.numberB 的和。此时,可以使用数据监听器进行相应处...

    愚公搬代码
  • 微信小程序组件如何嵌套组件

    友儿
  • 「小程序JAVA实战」小程序多媒体组件(27)

    IT架构圈
  • 「小程序JAVA实战」小程序开源搜索组件(53)

    拷贝项目根目录的wxSearchView文件夹到你项目的根目录下(也可以其它位置)。 在你的wxss文件里导入组件的样式(文件位置为相对位置):

    IT架构圈
  • 「小程序JAVA实战」小程序的表单组件(25)

    PS:小程序视图基本就是这样,最后我在myform做了个简单的例子。虽然做了几个例子,但是说实话还是没官网详细。大家一定要记住:学习小程序最好的方式就是通过官网...

    IT架构圈

扫码关注腾讯云开发者

领取腾讯云代金券