小程序学习之旅----slot 子组件调用父组件的方法、父组件调用子组件的方法

slot子组件

{{title}}

  我是footer子组件里的按钮

在footer子组件里slot调用

  footer组件

**父组件调用子组件的方法    
    1、调用子组件的时候定义一个id      

{{title}}

  我是footer子组件里的按钮



获取子组件的ChildRun方法

    2、父组件获取子组件的实例          var header = this.selectComponent("#header")

// pages/user/user.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    title: '用户组件title'
  },
  getChildRun () {
    var header = this.selectComponent('#header')
    // 父组件里执行子组件的方法
    header.childRun()
    // 获取子组件中data数据
    console.log(header.data.msg)
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  }
})

    3、header.方法名                 调用子组件里面的方法                 header.data.msg父组件里面直接获取子组件的数据

// components/header/header.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    // title: String
    // 如果没传值，就让显示默认值
    title: {
      type: "String",
      value: "头部"
    }
  },

  /**
   * 组件的初始数据,绑定的属性不要与properties里重复
   */
  data: {
    msg: '获取组件data值'
  },

  /**
   * 组件的方法列表
   */
  methods: {
    run () {
      console.log('run')
      console.log(this.data.msg);
      // 重新设定msg的值
      this.setData({
        msg: '改变后的值'
      })
    },
    childRun () {
      console.log('我是子组件的childRun方法')
    }
  }
})

**子组件执行父组件里面的方法

  footer组件


触发父组件的run方法

// components/footer/footer.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

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

  },

  /**
   * 组件的方法列表
   */
  methods: {
    getfather () {
      this.triggerEvent('parent', '子组件的数据')
    }
  }
})

    1、子组件给父组件传值

        this.triggerEvent('parent', 数据, 参数）

{{title}}




获取子组件的ChildRun方法

父组件中绑定parent，执行parentrun方法，parent事件是前面子传父定义的parent,可以任意起名，但是bind+任意名时，要一致。
    
    2、    

// pages/user/user.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    title: '用户组件title'
  },
  getChildRun () {
    var header = this.selectComponent('#header')
    // 父组件里执行子组件的方法
    header.childRun()
    // 获取子组件中data数据
    console.log(header.data.msg)
  },
  parentrun (e) {
    console.log(e.detail)
    console.log('我是父组件的run方法')
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  }
})

通过e.detaill可以拿到子组件传过来的值