微信小程序如何创键自定义模板和自定义事件，组件通讯_微信小程序创建一个中间事件怎么弄-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_46195945/article/details/107853568

本文介绍了微信小程序中如何创建自定义模板和组件，以及组件之间的通讯方式。包括父传子属性、子传父事件触发以及兄弟组件间的通信。详细步骤涉及模板文件夹的组织、组件引入和使用，以及事件监听和数据传递的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一.自定义模板
在这里插入图片描述先创键一个public文件夹，在public中创键一个template文件夹，在创键一个mouvie_modan文件夹，在这个中创建两个wxml文件
在父模块中用import引入
父模块接受子模块
二.自定义组件
子组件如何创键
第一步：就是先创建一个component文件夹
第二步：引入组件
在这里插入图片描述

把引入的父组件中的details.json文件的usingComponents添加要使用的子组件

例如:
{
“usingComponents”:{
“组件名”:“要引入的子组件路径”,
“Dialog”:"/components/dialog/dialog"
}
“navigationBarTitleText”: “首页”
}
在这里插入图片描述第三步:就是在父组件里直接使用子组件的标签名：

三.微信小程序组件通讯的方式
第一种是：父传子
在子组件里通过properties接受属性（实现方式类似于vue）
父传子步骤：
引入子组件
在子组件上添加自定义属性例如：title,content
在子组件上的properties上添加要接收的属性 title,content
在子组件上通过{{ }}就可以直接使用啦。

第二种是：子传父

通过: this.triggerEvent(‘事件名’,选项1,选项2) 类似于vue中的this.$emit(‘要派发的事件名’，要传递数据) – >{实现方式类似于vue}

1.首先在子组件里给一个触发事件例如：catchtap=“submit”
2.在对应的submit上添加派发的事件和要向父级传递的数据
this.triggerEvent(‘submit’,‘ok’)
this.triggerEvent(‘cancel’,‘no’)
3.父组件监听子组件派发过来的事件和要接收的数据
bind要监听的事件名=“回调方法”
例如：

<FirstItem
 bindsubmit="submit"
 bindcancel="cancel"

4.在父组件的js中接收数据
//监听确定按钮触发的回调
submit(e) {
console.log(‘监听确定’,e.detail)
},
cancel(e){
console.log(‘监听确定’,e.detail)
}

第三种是：兄弟之间