全局引用自定义组件遇坑
发布于 5 年前 作者 tianping 11036 次浏览 来自 问答
  1. 新建自定义组件

2.1 组件.wxml中只写了一个图片

<view class='modle_top' hidden='{{isHide}}'>
  <image class='modle_toast' src='/images/WechatIMG6.gif'></image>
</view>

2.2 组件.js，构造

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   * 用于组件自定义设置
   */
  properties: {
  },
  data: {
    isHide: false,
  },
  methods: {
    showToast: function () {
      // display需要先设置为block之后，才能执行动画
      this.setData({
        isHide: false,
      });
    },
    hideToast: function () {
      this.setData({
        isHide: true,
      })
    }
  }
})

2.3 组建.json

{
  "component": true,
  "usingComponents": {}
}

2.4 wxss就不粘了

3.0 因为现在全局中引用， 所以在app.json中添加

"usingComponents": {
    "toast": "component/modleToast/modleToast"
  },

3.1 我在index.wxml中开头插入组件

3.2 index.js中使用  在单独页面中使用是有用的

4.1 但是在在全局中引用就报错，在app.js

前两种导入都下面这个错

selectCompnent()方法则报没有定义该方法

代码写到这一步就卡住了~

我想实现在app.js中能调用自定义组件中的  showToast和hideToast方法 ，或者实现在util.js公共js中调用自定义组件的方法

请问怎么能解决？

2 回复

你这样 require 组件的 js 相当于重新执行一遍组件构造器，并不是获取组件的实例，自然会报错。如果想在 app 实例里拿到组件实例，那就要页面用某种方法将组件实例传过去才行。

至于要用什么方法，比如页面将组件实例放到某个全局量让 app 实例自己去拿或者页面主动调 app 实例的某个方法将组件实例送过去等方式都行，看个人的选择了。

提问模块只有点审核才能有用，其他问题模块点击没法应。。。

回到顶部