小程序引入组件以及将页面数据传给组件

最新推荐文章于 2024-03-27 14:14:48 发布

IG_wxz

最新推荐文章于 2024-03-27 14:14:48 发布

阅读量1.8k

点赞数 1

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

本文链接：https://blog.csdn.net/qq_40236722/article/details/89394048

版权

要想在页面中引入组件，首先我们在页面json文件里加上：

 "usingComponents": {
    "customer": "/components/customer/customer"
  }

然后 wxml文件引用：

<customer newPhone="{{phone}}"></customer>

注意：此处标签值要与页面json文件里名称一致、phone为我页面js文件data里的数据

然后我们进入到组件wxml：

<button type="default" class="btn1" catchtap='phone'></button>

组件js里这么写：

     Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // 外部wxml数据传入组件
    newPhone: {
      type: String,
      value: '',
      observer: function (newVal, oldVal) {
        
      }

    }

  },


  /**
   * 组件的方法列表
   */
  methods: {


// 拨打电话
phone() {
 console.log (this.properties.newPhone)
  wx.makePhoneCall({
    phoneNumber: this.properties.newPhone,
    success: function () {
      console.log("拨打电话成功！")
    },
    fail: function () {
      console.log("拨打电话失败！")
    }
  })
}
  }

})

我写的是一个拨打电话按钮的组件，看下效果：
在这里插入图片描述