微信小程序 自定义组件传参

欢迎使用Markdown编辑器

//自定义组件传参：
 methods: {
    click:function(res){
    var myEventDetail = {} // detail对象，提供给事件监听函数
	var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail)    //调用的html界面的参数名是bind+myevent
},

//####如果properties内的value会有变动，将会变化的代码写入observer函数内，并且将observer放入value下。

/**
   * 组件数据字段监听器，用于监听 properties 和 data 的变化
   */
observer(newVal, oldVal, changedPath) {
        // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串,
        // 如：'_propertyChange'
        // 通常 newVal 就是新设置的数据， oldVal 是旧数据
      }

这是一段js实例：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    value: { /**输入的分数值 */
      type: String,
      value: 0,
      observer(newVal, oldVal, changedPath) {
        // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
        // 通常 newVal 就是新设置的数据， oldVal 是旧数据
        this.lise();
      }
    },
    onoff: { /**是否开启评分 */
      type: Boolean,
      value: true,
    }
  },
    /**
   * 组件的初始数据
   */
  data: {
    img: {
      fullimg: "../../img/fullimg.png",
      halfimg: "../../img/halfimg.png",
      noneimg: "../../img/noneimg.png",
    },
    fully:0,
    fulle:0,
    fulls:0,
  },
/**
   * 组件的方法列表
   */
  methods: {
    lise:function(){
        var that = this;
        var sets = that.properties.value;
        // console.log("grade.js",sets);
        var score = parseInt(sets / 2);
        var half; //= Math.ceil(sets % 2);
        if (sets % 2 > 0) {
          half = 1;
        }else{
          half = 0;
        }
        var blank = 5 - score - half;
        if (sets > 10) {
          wx.showToast({
            title: '评分请在0~10以内',
            icon: 'waiting',
            image: "../../img/cw.png",
            mask: true,
            duration: 2000
          })
        } else {
          if (blank == 5 || that.properties.value == 0) {
            this.setData({
              value: "未评"
            })
          }
          this.setData({
            fully: score,
            fulle: half,
            fulls: blank,
          })
        }
        // console.log("分别是评分，满星，半星，无星", sets, ",", score, ",",half,blank);
    
    }
  },

wxml代码：

<view class="box" catchtap="dianji">
  <image src="{{img.fullimg}}" wx:for="{{fully}}" wx:key="key"></image>
  <image src="{{img.halfimg}}" wx:for="{{fulle}}" wx:key="key"></image>
  <image src="{{img.noneimg}}" wx:for="{{fulls}}" wx:key="key"></image>
  <view class="xin" wx:if="{{onoff}}">{{value}}分</view>
  <slot></slot>
</view>

效果图：

调用组件

json界面：

{
  "component": true,
  "usingComponents": {
    "grade": "/index/parts/grade/grade"
  }
}

这个路径自己写，最好是绝对路径

wxml界面：

<view class="boxx" catchtap="click">
  <image src="{{url}}" class="img"></image>
  <view class="title">{{title}}</view>
  <grade value="{{grade}}" onoff="{{whether}}"></grade>
</view>

js界面

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    url:{
      type:String,
      value:"/index/img/jzsb.png"
    },
    title:{
      type:String,
      value:"标题未输入"
    },
    grade:{
      type:Number,
      value:0
    },
    whether:{
      type:Boolean,
      value:true
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    click:function(res){

      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail)
    },
  }
})

效果图：

css界面我没有放，基本就是宽高和display:flex等常用属性。
最重要的那部分传参部分我放在页面最上面了