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

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组件
</view>
<slot></slot>

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

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

    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方法')
    }
  }
})

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

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

// components/footer/footer.js
Component({
  /**
   * 组件的属性列表
   */
  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'></footer>
<br />
<button bindtap='getChildRun'>获取子组件的ChildRun方法</button>

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

// 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可以拿到子组件传过来的值