第13课 微信小程序组件间通信与事件：

第13课 微信小程序组件间通信与事件：

通过接收组件内的点击事件触发外部页面内的点击事件实现组件内的通信：

自定义创建组件的目录结构：

触发事件：

自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：

my-component.js全部代码如下

Component({
  externalClasses: ['user-class'],  //设置外部传递class类名
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    username: {
      type: String, //定义传值的类型
      value: '用户名',  //初始值
    },
    sign: {
      type: String, //定义传值的类型
      value: '这家伙很赖，什么也没写！',  //初始值
    },
  },
  data: {
    // 这里是一些组件内部数据
    one:'我是数据1',
    two:['我是数据2','我是一个数组数据','有3条组员']
  },
  methods: {
    // 这里是一个自定义方法
    fn(){	//fn方法又组件的buttom点击时触发 引用组件时用bindaaa接收点击触发事件
      const data = this.data
      const myEventDetail = {data}  //参数
      const myEventOption = {}  //触发事件的选项
      //自定义一个点击事件名为aaa
      this.triggerEvent("aaa", myEventDetail, myEventOption)
    }
  }
})

组件的wxml内容样式：

my-component.wxml全部代码如下

<!-- 这是自定义组件的内部WXML结构 -->
<view class="user-class">
用户：{{username}}
</view>
<view class="inner">
个性签名：{{sign}}
</view>
<button bindtap="fn">点我签到</button>

my-component.json全部代码如下 //“component”: true设置为组件

{
  "component": true,
  "usingComponents": {}
}

my-component.wxss全部代码如下 //“component”: true设置为组件

/* components/my-component.wxss */
/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

以下是引入组件的index页面代码：

页面先在json文件内引入改组件：

index.json内全部代码如下：

{
  "usingComponents": {
    "my-component": "/components/my-component"
  }
}

wxml页面引入组件并且监听点击事件：

index.wxml全部代码如下

<view>
  <!-- 以下是对一个自定义组件的引用  bindaaa是组件内定义的监听方法-->
  <my-component bindaaa="pagefn" username="小明" user-class="userclass">
    <!-- 这个button标签被组件内写好的插槽接收 -->
  </my-component>
</view>

通过接收主件内的点击事件触发外部页面内的点击事件实现组件内的通信：

index.js全部代码如下

Page({
  data: {
    //这里写页面的数据
  },
  pagefn(e){
    console.log("下面是组件内传过来的参数")
    console.log(e)
  }
})

index.wxss内全部代码如下：

.userclass{
  color: green;
}

运行效果如下：