小程序组件通信

最新推荐文章于 2023-06-29 08:33:00 发布

是张鱼小丸子鸭

最新推荐文章于 2023-06-29 08:33:00 发布

阅读量298

点赞数

分类专栏：微信小程序文章标签：小程序 javascript 前端 Powered by 金山文档

张鱼小丸子

本文链接：https://blog.csdn.net/qq_60976312/article/details/128856915

版权

微信小程序专栏收录该内容

9 篇文章 0 订阅

订阅专栏

组件的创建

根目录中创建一个components文件夹，

文件夹中右键可以选择创建Component组件，自动生成组件文件

组件的js文件中Component构造器，properties, data, methods 三部分内容

组件的引入方式

app.json中使用usingComponenets注册自定义的组件【全局注册】

页面配置文件的usingComponents，完成一个局部注册的功能【局部注册】

直接使用组件的标签即可

组件之间的通信

父传子

先父组件中的子组件标签绑定要传递的属性值

子组件中可以通过properties接受传递的数据内容，可以进行类型判断，

value设置默认值

父组件传递
<my-btn title="分享按钮"></my-btn>
<my-btn color="#FF0000"></my-btn>
<my-btn color="#008800" title="表单提交"></my-btn>

//子组件的js文件
Component({
    /**
   * 组件的属性列表
   */
  properties: {
    title:{
      type:String,
      value:"点击按钮"
    },
    color:{
      type:String,
      value:"#0088dd"
    }
  },
})

<!--components/btn.wxml-->
<view class="btn" style="{{'background:'+color}}">{{title}}</view>

子传父

子组件中绑定一个事件，调用自定义的方法，

方法中，this.triggerEvent传递数据，参考Vue中$emit()

父组件中bind:自定义事件名=”父组件中自定一的方法“，方法的形参event.detail就是接受的数据

/**
   * 子组件
   */
 methods: {
    myEvent(){
      console.log("子传父事件触发");
      this.triggerEvent("sendCmd","发送指令,反转字符串");
    }
  }

//子传父绑定事件，父组件
  fun1(event){
    console.log("子传父事件来到第二步");
    console.log(event)
    let tmp = this.data.title1.split("").reverse().join("");
    this.setData({
      title1:tmp,
    })
  },

组件通信的流程跟我们的vue差不多，如果了解vue组件通信流程，那么理解小程序组件通信就会非常容易