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

<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 可以获取。
}



事件子传父：
// 子组件触发
this.triggerEvent('myevent', {data: value})

// 父组件监听
<child-component bindmyevent="handleEvent" />

组件接受参数。

  /**
   * 组件的属性列表
   */
  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

组件内部监听参数的变化

  <w-goods_list  propA="{{propA}}" propB="{{propB}}"  />


Component({
  properties: {
    propA: String,
    propB: Number
  },
  observers: {
    'propA, propB'(newA, newB) {
      console.log(newA, newB)
    }
  },

 
当我们在父组件修改 propA propB  observers 方法会触发。输出

排成2行是因为字符串有回车 \n

‌深度监听对象‌每个属性

使用通配符监听对象内部变化：

'obj.**'(obj) { // 当obj任意子字段变化时触发 }

通配符监听‌

'some.field.**' 监听对象嵌套字段变化

'array[**]' 监听数组元素变化

‌异步处理支持‌

可在回调中使用异步操作：

async 'propA'(val) { 

const res = await fetchData(val) 

this.setData({ result: res })

 }

组件的生命周期

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

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

初始化数据

  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; ">