微信小程序中外部调用自定义组件内部方法的方法

---

title: 微信小程序中外部调用自定义组件内部方法的方法
date: 2023-02-06 15:25:38.048
updated: 2023-02-06 15:29:48.945
url: https://hexo.start237.top/archives/微信小程序中外部调用自定义组件内部方法的方法
categories:

• IT技术
  tags:
• javascript
• 微信小程序

---

自定义一个组件写上属性id的值，假如说里面有个方法是 setValue

Component({

  behaviors: [],

  // 属性定义（详情参见下文）
  properties: {
    myProperty: { // 属性名
      type: String,
      value: ''
    },
    myProperty2: String // 简化的定义方式
  },

  data: {}, // 私有数据，可用于模板渲染

  lifetimes: {
    // 生命周期函数，可以为函数，或一个在 methods 段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 生命周期函数，可以为函数，或一个在 methods 段中定义的方法名
  attached: function () { }, // 此处 attached 的声明会被 lifetimes 字段中的声明覆盖
  ready: function() { },

  pageLifetimes: {
    // 组件所在页面的生命周期函数
    show: function () { },
    hide: function () { },
    resize: function () { },
  },

  methods: {
  // 这个是外部要调用的方法
 	 setValue(val){},
    onMyButtonTap: function(){
      this.setData({
        // 更新属性和数据的方法与更新页面数据的方法类似
      })
    },
    // 内部方法建议以下划线开头
    _myPrivateMethod: function(){
      // 这里将 data.A[0].B 设为 'myPrivateData'
      this.setData({
        'A[0].B': 'myPrivateData'
      })
    },
    _propertyChange: function(newVal, oldVal) {

    }
  }

})

封装后的调用。

<custom-components id="customComponents"></custom-components>

使用如下方法selectComponents调用即可。

 this.selectComponent('#customComponents').setValue(val)