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

自定义组件

        组件定义

                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(){}}})

相关内容

热门资讯

加州旅游断崖式暴跌! 离谱物价... 一直以来,加州都是无数游客心里的“白月光”——从旧金山的金门大桥、洛杉矶的星光大道,到优胜美地、迪士...
“雄霸旅游景点具体位置及门票价... 嘿,朋友们!今天咱们来聊聊关于“雄霸旅游景点”这个话题。估计一听到“雄霸”这俩字,大家就好奇这到底是...
2025第六届茶业大会在铜开幕 图为2025第六届茶业大会开幕式现场。 铜仁生态美,梵净抹茶香。5月8日,以“守正创新,抹茶助力产业...
理想华莱:加快科技成果转化 以... 5月7日,湖南省科技厅党组书记李志坚带领调研组深入安化县调研科技创新、“十五五”科技创新规划等工作开...
福建武夷山迎繁忙制茶季 当下正值福建武夷山繁忙制茶季。截至2024年底,武夷山有14.8万亩茶园,年产毛茶超2.5万吨,为武...
夏天也要吃的4道暖身菜!高蛋白... 夏天也要吃的4道暖身菜!高蛋白高热量,御寒不怕冷 在炎热的夏季,许多人可能认为暖身菜只适合寒冷的冬季...
​探索酱香白酒神秘世界:玖辰职... 【贵州讯】 ——对话创始人蔡磊:从“经验传承”到“科学觉醒”的产业变革之路,在中国白酒文化源远流长的...
嗦粉江湖里的赣味传奇:江西米粉... 在中华美食的浩瀚版图中,江西米粉宛如一颗璀璨明珠,以其独特的风味与深厚的底蕴,在 “嗦粉江湖” 中占...
Lady Gaga 在巴西期间... Lady Gaga 在巴西期间,清粉丝吃披萨! 然而,酒店餐厅的供应不足以满足80份玛格丽特披萨的需...
非洲也有少林寺! 一群非洲少年... 53岁的非洲人达米安在中国学习多年功夫后回到贝宁,每天免费为3至15岁的非洲儿童教授中国功夫、武术和...
“亏”上热搜,文旅重镇谁赚了? 每经记者:淡忠奎 每经编辑:杨欢 图片来源:摄图网_507690717 “五一”假期,文旅市场跑出...
男子旅游遭遇重症肺炎,出现昏迷... 南都讯 旅游期间咳嗽、发烧,本以为是旅途劳累造成的普通感冒,结果却发展为重症肺炎,险些危及生命……这...
10月南京旅游必游景点美食攻略 在这篇文章中,我们将为您详细介绍10月南京旅游攻略,让您在金秋时节畅游这座六朝古都。一、10月南京旅...
国产精酿品牌狂奔,福鹿家202... 一家“雪王”浓度颇高的精酿啤酒馆,高调闯入大众视野。 今年3月以来,关于“鲜啤福鹿家”精酿啤酒的探店...
台湾蚵仔煎:蚵仔 + 番薯粉煎... 台湾蚵仔煎,这道街头巷尾最具代表性的美食,堪称夜市排队王。它以新鲜蚵仔搭配番薯粉煎至金黄酥脆,淋上秘...
国际金奖加冕,浙江白酒渡磬酒成... 在2025 IGC国际烈酒(香港)大赛最新公布的第二批获奖名单中,浙江白酒品牌渡磬酒脱颖而出,斩获金...