slot子组件

!--pages/user/user.wxml--header title='{{title}}'/header{{title}}footer  button我是footer子组件里的按钮/button/footer

在footer子组件里slot调用

!--components/footer/footer.wxml--view class="footer" hover-class="none" hover-stop-propagation="false"  footer组件/viewslot/slot

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

!--pages/user/user.wxml--!-- 此处定义一个id是为了在父组件中执行子组件的方法用 --header title='{{title}}' id='header'/header{{title}}footer  button我是footer子组件里的按钮/button/footerbr /button bindtap='getChildRun'获取子组件的ChildRun方法/button

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

// pages/user/user.jsPage({  /**   * 页面的初始数据   */  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.jsComponent({  /**   * 组件的属性列表   */  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方法')    }  }})

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

!--components/footer/footer.wxml--view class="footer" hover-class="none" hover-stop-propagation="false"  footer组件/viewslot/slotbutton bindtap='getfather'触发父组件的run方法/button

// components/footer/footer.jsComponent({  /**   * 组件的属性列表   */  properties: {  },  /**   * 组件的初始数据   */  data: {  },  /**   * 组件的方法列表   */  methods: {    getfather () {      this.triggerEvent('parent', '子组件的数据')    }  }})

    1、子组件给父组件传值

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

!--pages/user/user.wxml--!-- 此处定义一个id是为了在父组件中执行子组件的方法用 --header title='{{title}}' id='header'/header{{title}}!-- footer  button我是footer子组件里的按钮/button/footer --footer bindparent='parentrun'/footerbr /button bindtap='getChildRun'获取子组件的ChildRun方法/button

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

// pages/user/user.jsPage({  /**   * 页面的初始数据   */  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可以拿到子组件传过来的值