微信小程序组件化
admin
2024-04-16 04:14:01

自定义组件

        组件定义

                1、创建组件

                        构造器使用的时Component

                        配置文件中设置component:true

                2、引入组件

                        首先声明这个组件,在配置文件声明

"usingComponents": {   "my-button":"/components/MyButton/MyButton"},

                3、设置插槽

                4、命名插槽

Component({  options: {    multipleSlots: true // 在组件定义时的选项中启用多slot支持  },})// 使用的时候// 父组件   // 子组件中

         组件中的样式

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

                组件模板

                组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树,将被插入到组件的引用位置上。

                在组件模板中可以提供一个  节点,用于承载组件引用时提供的子节点。

这里是组件的内部节点
这里是插入到组件slot中的内容

                注意,在模板中引用到的自定义组件及其对应的节点名需要在 json 文件中显式定义,否则会被当作一个无意义的节点。除此以外,节点名也可以被声明为抽象节点。

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

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

                组件和引用组件的页面中使用后代选择器(.a .b)在一些极端情况下会有非预期的表现,如遇,请避免使用。

                子元素选择器(.a>.b)只能用于 view 组件与其子节点之间,用于其他组件可能导致非预期的情况。

                继承样式,如 font 、 color ,会从组件外继承到组件内。

                除继承样式外, app.wxss 中的样式、组件所在页面的的样式对自定义组件无效(除非更改组件样式隔离选项)。

        父子组件通信

                父组件给子组件传值   在子组件中定义属性

properties: {    // 复杂定义    name:{      type: String,      value:'张三丰'    },    // 简单定义    name2:String},

 父组件在引用子组件的时候通过设置属性的方式给子组件传值

        子组件给父组件传值

                在组件中绑定一个自定义事件

// 引用了自定义的组件, 绑定了myevent事件,这个事件对应的是parentEvent方法

         在子组件中触发这个事件,可以给父组件传值。

                子组件中通过triggerEvent触发事件

 methods: {    方法名字: function(){      var myEventDetail = {} // detail对象,提供给事件监听函数      var myEventOption = {} // 触发事件的选项      this.triggerEvent('myevent', myEventDetail, myEventOption)    }  }

                组件的生命周期

        Behaviors  注册一个 behavior,接受一个 Object 类型的参数

module.exports = Behavior({behaviors: [],properties: {myBehaviorProperty: {type: String}},data: {myBehaviorData: {}},attached: function(){},methods: {myBehaviorMethod: function(){}}})

相关内容

热门资讯

小雪降温,别错过这几道滋补菜,... 小雪降温,别错过这几道滋补菜,孩子一吃就两碗,御寒强免疫 小雪时节天气渐冷,下面分享几道滋补家常菜,...
原创 它... 在探讨美食的海洋中,有一种食物以其独特的魅力,成为了众多男性心中的挚爱。它不仅满足了味蕾的极致享受,...
原创 它... 标题:快餐文化下的童年记忆 在快节奏的现代生活中,快餐以其便捷、快速的特点成为了人们餐桌上的常客。...
从“蟹季限定”到“四季常热” 味觉公路 度假区(阳澄湖镇)供图 □ 本报记者 陈诚 王俊杰 入冬后,阳澄湖畔有了阵阵凉意,苏州“村...
佳木斯市再添新景 四丰山水库打... 本文转自:人民网-黑龙江频道人民网哈尔滨11月19日电 近日,佳木斯四丰山水库再添新景——沿岸休闲步...