热门标签
热门文章
- 1抖音发布_抖音上传视频接口
- 2模态窗口原理及注意事项_tinynce model 窗口实现原理
- 3Linux系统安装（CentOS Vmware）
- 4Linux命令温故而知新_dkpg_dkpg 区分大小写么
- 5Hadoop入门学习笔记（汇总）
- 6【Unity编辑器扩展】Unity内部Asset资源配置ScriptableObject_unity c# asset 配置
- 7华为机试真题Java 实现【最小调整顺序次数】【2022.11 Q4】_最小的调整次数java
- 8内网穿透-Frp（1）使用樱花Frp（Sakura Frp）进行免费的内网穿透操作步骤_nyatwork
- 9MAVEN中央仓库地址大全_mvnrepository仓库地址
- 10Percona XtraBackup 数据恢复工具安装 ubuntu 16.04_apt install percona-xtrabackup-24
当前位置: article > 正文
微信小程序自定义组件或模板（为了项目方便复用）_微信开发工具 模块组件重复使用方法
作者：凡人多烦事01 | 2024-02-16 14:04:32
赞
踩
微信开发工具 模块组件重复使用方法
1.自定义组件或模板（为了项目方便复用）
自定义模板：
只复用wxml,css部分，不具有交互功能
- 1
- wxml引入代码:
<import src="classify.skeleton.wxml"/>
//使用 is 是为模块文件名
<template is="skeleton" />
- 1
- 2
- 3
- 4
- wxss代码:
//直接引入其他wxss样式
@import "./classify.skeleton.wxss";
- 1
- 2
自定义组件
- 子组件如何创建
一个完整独立的视图单元（wxml,css,js） 创建和使用组件的步骤： 第一步：创建一个组件：在子组件文件夹上--右建--选择【新建component】选项 第二步：引入组件 在要引入的父组件中的json文件的usingComponents添加要使用的子组件 例如： { "usingComponents": { "组件名":"要引入的子组件路径", "Dialog":"/components/dialog/dialog" }, "navigationBarTitleText": "首页" } 第三步：使用 在父组件直接使用子组件的标签名：<Dialog />
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
-
父组件如何获取子组件中的数据或方法
-
子向父传递事件:
this.triggerEvent('事件名',选项1,选项2) 类似于vue中的this.$emit('要派发的事件名'，要传递数据)- 1
-
微信小程序组件通讯的方式：
- 父传子
实现方式类似于vue 引入子组件 在子组件上添加自定义属性 例如：title,content 在子组件上的properties上添加要接收的属性 title,content 在子组件上通过{{ }}就可以直接使用啦。。。- 1
- 2
- 3
- 4
- 5
- 子传父
实现方式类似于vue 1.在子组件上触发一个事件 例如：catchtap="confirmmFn" 2.在对应的confirmFn上添加派发的事件和要向父级传递的数据 this.triggerEvent('confirm','ok') this.triggerEvent('cancel','no') 3.父组件监听子组件派发过来的事件和要接收的数据 bind要监听的事件名=“回调方法” 例如： <Dialog bindconfirm="confirm" bindcancel="cancel" /> 4.在父组件的js中接收数据 //监听确定按钮触发的回调 confirm(e) { console.log('监听确定',e.detail) },
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 兄弟之间
A兄弟,B兄弟,C（父组件）三个组件 A-->C--->B- 1
- 2
- 3
- 4
声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】
推荐阅读
相关标签
