微信小程序组件传值和组件通信

北城南忆�

已于 2023-03-06 09:57:53 修改

阅读量474

点赞数 1

文章标签：微信小程序 javascript 前端

于 2023-03-03 11:19:57 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_45220813/article/details/129316606

版权

本文介绍了如何在微信小程序中创建和使用自定义组件，包括在components文件夹下创建组件，配置usingComponents，以及在父组件和子组件间进行数据传递。父组件通过设置data并将数据绑定到属性来传递数据给子组件，而子组件可以通过triggerEvent触发事件并传递数据回父组件。

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

微信小程序组件传值和组件通信

自定义组件

1.在根目录下创建components文件夹，用于存放组件，创建test组件，不需要再在app.json中引入

在这里插入图片描述

组件使用

(1)在子组件的json添加如下代码;

{
     "component": true,       //是否为组件     
    "usingComponents": {}
}

(2)在父组件的json文件中添加如下代码：

{
  "usingComponents": {
    "myFirst":"/components/test/test"      //子组件的地址
  }
}

(3)父组件页面使用

 <myFirst motto="{{motto}}"  bindsend="send"></myFirst>

组件通信

父传子

（1）在父组件的js文件定义数据

data: {
    motto: 'Hello World',
  },

(2)子组件接受数据，在properties定义数据类型和默认值

 properties: {
        motto:{
            type:String,                      //类型
            value:'默认是：你好，世界'     //默认值
        },
    },

（3）页面渲染：在wxml添加如下代码：

<view>
	父组件数据：{{motto}}
</view>

子传父

（1）在子组件text.wxml定义一个button,用于传递数据

<view>
	我是自定义组件
	<button bindtap="send">点击按钮向父组件传值</button>
</view>

(2)在子组件test.js中定义事件和数据

// components/test/test.js
Component({
    /**
     * 组件的属性列表
     */
    properties: {
    },

    /**
     * 组件的初始数据
     */
    data: {
        msg:'我是子组件'

    },

    /**
     * 组件的方法列表
     */
    methods: {
        send(){
            this.triggerEvent('send',this.data.msg)
          }

    }
})

(3)父组件接受数据,自定义事件test.wxml添加如下代码：

<!--index.wxml-->
<view class="container">
  <myFirst motto="{{motto}}"  bindsend="send"></myFirst>
</view>

（4）在父组件地test.js中添加send方法，用于输出子组件的数据

  send(e){
    console.log(e.detail);
  },