最近搜索

关于 小程序组件 使用案例

浏览:361
管理员 2024-02-03 16:42



组件向父组件 调用 方法  并且  传送参数  

<w-logins wx:if="{{show_login}}"  state="3" bind:user_login_success="user_login_success"  bind:login_win_close="login_win_close"   /> 



    close_login_model() {
      //向父组件 发送关闭窗口事件。
      var obj= {};
      obj.id=34;
      obj.name="234";
      this.triggerEvent('login_win_close', obj, {})
    },
    
    
    父组件调用的方法 
      login_win_close(e){
    console.log(e);   
    这里通过e.detail.id  e.detail.name 可以获取。
  },



组件接受参数。


  /**
   * 组件的属性列表
   */
  properties: {
    state: {
      type: Number,
      value: 0
    }
  },

  /**
   * 组件的属性列表
   */
  properties: {
    nav_list: {
      type: Array,
      value: []
    } ,
    nav_head: {
      type: Object,
      value: {}
    },
     q: {
      type: String
    },
     isChecked: {      
     type: Boolean,      
     value: false  // 默认值必须通过{{}}包裹(部分框架版本要求) <my-component isChecked="{{false}}"></my-component>
    }
  },

  
type还有一个String



组件的生命周期

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
      console.log("在组件实例进入页面节点树时执行")
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
      console.log("在组件实例被从页面节点树移除时执行")
    },
  },
  /**
   * 组件的属性列表
   */
  properties: {
    nav_list: {
      type: Array,
      value: []
    } ,
    nav_head: {
      type: Object,
      value: {}
    }
  },


组件也可以调用 我们写的api  也可以使用wx_login



初始化数据

image.png

  lifetimes: {
    attached: function () {
      // this.load_goods_type_list();
      this.setData({
        id:this.properties.xiaoshou_head.id,
        client: this.properties.xiaoshou_head.client || "",
        phone: this.properties.xiaoshou_head.phone || "",
        address: this.properties.xiaoshou_head.address || "",
        remark: this.properties.xiaoshou_head.remark || "",
      })
    },
    detached: function () {
      console.log("在组件实例被从页面节点树移除时执行")
    },
  },



组件properties数据  可以直接在页面显示

    properties: {
        isDateShow: {      
      type: Boolean,      
      value: false  // 默认值必须通过{{}}包裹(部分框架版本要求) <my-component isChecked="{{false}}"></my-component>
     } ,
    isUserShow: {      
      type: Boolean,      
      value: false  // 默认值必须通过{{}}包裹(部分框架版本要求) <my-component isChecked="{{false}}"></my-component>
     }
     }
     
      <view wx:if="{{isDateShow}}" style="display: flex; padding: 15rpx; font-size: 30rpx;align-items: center; color: #424242; ">


联系站长

站长微信:xiaomao0055

站长QQ:14496453