1.创建组件(demo:模拟微信聊天中的表情包发送)

1.1打开微信开发者工具,创建父组件chat页面

在chat.wxml中

<!-- 表情组件 -->
<view class='bottom'>
    <emoji bind:myevent="emojiEvent" wx:if="{{isEmojiShow}}"></emoji>
 </view>

chat组件js

// pages/chat/chat.js
const app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log(options)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {

  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {
  },
  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function() {
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function() {
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function() {},
})

1.2创建子组件emoji页面

<!--component/emoji/emoji.wxml-->
<view class='emojiUI'>
  <swiper class='swiper' indicator-dots="{{indicatorDots}}" 
  autoplay="{{autoplay}}" 
  circular="{{circular}}" 
  vertical="{{vertical}}" 
  interval="{{interval}}" 
  duration="{{duration}}" 
  previous-margin="{{previousMargin}}px" 
  next-margin="{{nextMargin}}px"current="{{currentSwiper}}" bindchange="swiperChange">
    <block wx:for="{{Elist}}" wx:key="unique" wx:for-item="key">
      <swiper-item class="swiper-list">
        <view class="swiper-item" wx:for="{{key.list}}" wx:key="unique1" catchtap='emojiClick' data-text="{{item}}">{{item}}</view>
      </swiper-item>
    </block>
  </swiper>
  <view class="dots">
    <block wx:for="{{Elist}}" wx:key="unique2">
      <view class="dot{{index == currentSwiper ? ' active' : ''}}"></view>
    </block>
  </view>
</view>

// component/emoji/emoji.js
var emojiFn = require('../../utils/emoji.js');
console.log(emojiFn.emojiList);
Component({
  /**
   * 组件的属性列表
   */
  behaviors: [],
  properties: {
    emojiVal: {
      type: String,
      value: ""
    },
  },

  /**
   * 组件的初始数据
   */
  data: {
    indicatorDots: false,
    vertical: false,
    autoplay: false,
    circular: false,
    interval: 2000,
    duration: 500,
    previousMargin: 0,
    nextMargin: 0,
    currentSwiper: 0,
    Elist: emojiFn.emojiList
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onTap: function() {
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      this.triggerEvent('myevent', myEventDetail, myEventOption)
    },
    swiperChange: function(e) {
      this.setData({
        currentSwiper: e.detail.current
      })
    },
    emojiClick: function(e) {
      // console.log(e.currentTarget.dataset.text)
      this.setData({
        emojiVal: e.currentTarget.dataset.text
      });
      this.triggerEvent('myevent', { emojiVal: e.currentTarget.dataset.text });
    }
  }
})

2.引入子组件

//chat.json
{
  "usingComponents": {
    "emoji": "/component/emoji/emoji"
  },
  "navigationBarTitleText": "聊天列表"
}

3.父组件向子组件传值

<view>我是chat</view>
<!-- 表情组件 -->
<view class='bottom'>
      <emoji emojiVal='我是chat向emoji中传入的参数'></emoji>
</view>

在emoji组件的wxml中写入：

<view>chat中传入的参数：{{emojiVal}}</view>

在emoji组件的js中写入：

Component({
  /**
   * 组件的属性列表
   */
  behaviors: [],
  properties: {
    emojiVal: {
      type: String,
      value: ""
    },
  },
  /**
   * 组件的初始数据
   */
  data: {},
  /**
   * 组件的方法列表
   */
  methods: {}
})

4子组件向父组件传参

要让子组件给父组件传参，首先得在父组件引入子组件的时候，加个触发事件，如下：

<!-- 表情组件 -->
<view class='bottom'>
     <emoji bind:myevent="emojiEvent" ></emoji>
 </view>

在chat组件中js:

// pages/chat/chat.js
const app = getApp();
Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function(options) {
    console.log(options)
  },
  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function() {
  },
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function() {
  },
  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function() {
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function() {
  },
emojiEvent: function(e) {
    console.log(e.detail.emojiVal);//接收子组件传来的参数
  },
})

onMyEvent就是当被子组件触发时的函数
子组件wxml中

<view class="swiper-item" catchtap='emojiClick'  data-text="{{emoji}}">{{emojiVal}}</view>

绑定的事件一触发，就可以传入参数进入父组件中，在子组件中js:

emojiClick: function(e) {
      this.triggerEvent('myevent', { emojiVal: e.currentTarget.dataset.text });
 }