小程序组件切换

记录一下刚学到的父子组件切换

1.先在json中声明子组件
2.页面中使用子组件

在parent.json中声明子组件

{
  "usingComponents": {
    "children": "/components/children/children"
  }
}

在parent.wxml中使用子组件

<view class="content">
  <view class="title">父页面</view>
  {{detail}}
</view>
<view class="content">
  <view class="title">子组件内容</view>
    //父页面传值给子组件：通过属性传值  例如下文的step
	//父页面获取子组件传过来的值 例如下文的realNameConfirm
  <children step="{{step}}" bind:realNameConfirm="realNameConfirm"></children>
</view>

parent.js

realNameConfirm(e){
    this.setData({
      detail:e.detail //获取子组件传来的值
    })
  },

------子组件内容---------
children.wxml

<view>{{step}}</view>
<button bindtap="realNameConfirm">子组件传值给父页面</button>

children.js

properties: {
    step:{//接收父页面传过来的值
      type:String
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    realNameConfirm(){
      this.triggerEvent('realNameConfirm', '子组件传给父组件的值-----zzz')     //通过triggerEvent将参数传给父组件
    }
  }