小程序之自定义组件

最新推荐文章于 2024-08-04 22:08:21 发布

邱小健

最新推荐文章于 2024-08-04 22:08:21 发布

阅读量478

点赞数 1

分类专栏：小程序

本文链接：https://blog.csdn.net/qq_41473887/article/details/93484897

版权

小程序专栏收录该内容

16 篇文章 0 订阅

订阅专栏

今天说一下关于小程序中的自定义组件。

这里不说太基础的东西，对于基础的用法的话可以直接去小程序官网查询。

传送门：https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

一：组件间的数据传递：

页面的数据传递给组件：（下面是一蓝牙组件（bluetooth）作为例子来说明）

通过绑定数据来进行传递   通过属性绑定
页面部分：
<bluetooth id="bluetooth" inputText="{{inputText}}"></bluetooth>   
组件部分：
  properties: {  //接收组件传入的值，直接使用即可
    inputText: {
      type: String
    }
  },

二：组件间的事件调用

在页面中的某些逻辑，需要去调用组件中的事件。

组件部分代码： 
  methods: {
    aa(){
      console.log('aa')
    },
  }

页面部分：  
  onLoad: function (options) {
    let bluetooth = this.selectComponent('#bluetooth'); // 页面获取自定义组件实例
    // bluetooth.aa(); // 通过实例调用组件事件
this.setData({
  bluetooth,
})
  },

  sendMessage(e){   //例如这是页面中的某个数据
    let { bluetooth}=this.data;   //取得组件的实例，可以操作实例中的对象
let inputText=e.detail.value;
this.setData({
  inputText
})
    console.log(inputText)
    bluetooth.Send()   //Send是页面中的某个函数

  },