微信小程序自定义组件、父子组件相互调用传值

获取更多小程序相关文章

1.创建 header 组件

1.1 选中文件夹，右键新建 Component。 暂命名为 header

1.2 header.js 文件配置组件属性与方法

交互关键方法⚠️ this.triggerEvent('subClickEvent', '来自 子组件 的信号这个是 参数')

Component({

 //组件的属性列表
  properties: {
    /// 属性名 简化写法
    name: String,
    /// 属性名
    car: {
      type: String,
      value: ''
    }
  },

// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
  lifetimes: {
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

// 组件所在页面的生命周期函数
  pageLifetimes: {
    show: function () { },
    hide: function () { },
    resize: function () { },
  },


// 组件的初始数据
  data: {
    color: '彩色'
  },

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

    logP() {
      console.log('pppppp');
    },

    // 组件内部先调用该方法 再调用父方法
    cllParentClick() {
      //  触发 subClickEvent 事件， 间接通知在 父组件中 subClickEvent 绑定的 subClick 方法
      //  建议  subClickEvent 与  subClick 命名相同，这个刚接触感觉会有一点混乱
      // subClickEvent 就是通知名。subClickEvent 这个通知在使用该组件时绑定的，绑定了父组件的 subClick 方法。然后在这里触发了 subClickEvent 通知
      this.triggerEvent('subClickEvent', '来自 子组件 的信号这个是 参数')
    },

    btnClick(e) {
      console.log('开车开车');
    },
    /// 私有方法 下划线开头
    _saySelfName() {
      console.log('header');
    }
  }
})

1.3 header.wxml

header 组件内容

  name:{{name}}  car:{{car}}
  开车开车
  调用父组件 subClick 方法

header.wxss

.header {
  background-color: red;
}

2. 使用 header 组件

2.1 page.json

{
  "usingComponents": {
    "header": "../../../components/header/header"
  }
}

2.2 page.wxml

获取组件属性

在这里注册的 subClickEvent 事件，当 header 组件触发 subClickEvent 时，调用 page 的 subClick 方法。 建议将 subClickEvent 与 subClick 命名相同

2.3 page.js

Page({

// header 组件间接调用该方法
  subClick(e) {
    console.log(e.detail);
  },
  
  // 主动获取 header 组件实例对象
  getHeaderInfo() {
    /// 获取组件实例对象  记得加 # 
    let header = this.selectComponent('#comHeader');
    /// 获取属性
    console.log(header.properties.color);
    /// 调用方法
    header.logP();
  },
})