微信小程序：自定义组件component

一：新建文件

• （1）新建自定义组件文件

  • 在根目录新建components文件夹，然后右键新建自定义组件目录，最后右键新建Component

     

    

    新建自定义组件

• （2）组件json文件配置

 

      {
        "component": true  这一组文件设为自定义组件
      }

• （3）组件wxml编写

 

        <!-- 子组件 -->
        <view>我是子组件</view>

• （4）组件wxss文件，因为无法直接使用全局样式，需要导入

 

      /* 自定义组件 */
      @import "../../app.wxss";

• （5）导入自定义组件
  • （5.1）在父组件json文件的usingComponents中导入组件

      {
      "usingComponents": {
        "submit-bar":"../../components/submit-bar/index"
        类似Vue中的导入组件：import xxx from '组件路径'
      }
    }
  

  • （5.2）在父组件wxml文件中以组件名作为标签使用组件

      <submit-bar></submit-bar>
  

效果图

二、父子组件通信

（与Vue父子组件传参原理一样，学过Vue的盆友更容易上手哦）

1、父传子

• （1）在父组件中的子组件标签添加属性，给子组件传递数据

 

        <submit-bar totalMoney="{{totalMoney}}" ></submit-bar>

• （2）子组件在js中通过properties接收，可以指定接收数据类型

 

      properties: {
        totalMoney: Number
      }

2、子传父

• （1）在父组件的子组件标签自定义事件，传给子组件

 

        <submit-bar  bind:submit="submit" ></submit-bar>

• （2）子组件用this.triggerEvent('父组件自定义事件', '要传递的参数')，触发父组件传过来的自定义事件

 

      this.triggerEvent("submit", 'Hello Grayly')

• （3）第二步执行后，父组件自定义事件绑定的函数就会执行，同时接受子组件传过来的数据
  （在event.detail中可得到子组件传过来的参数）

 

      submit(event) {
          console.log(event);
      },

父组件接收到子组件传过来的参数