小程序：自定义组件的使用和通信

1、在根目录新建components文件夹，并在里面添加组件

---

 二、组件的配置

1，json文件

      {
        "component": true  
      }

 2，wxml文件

我是子组件
按钮

3，wxss文件（ 需要导入全局样式 ）

@import '../../app.wxss'

---

 三、导入自定义组件

1，在父组件json文件的usingComponents中导入组件

{
  "usingComponents": {
    "test":"/components/submit/index"
  }
}

2，在父组件wxml文件中以组件名作为标签使用组件

到此为止即可看到子组件显示内容！

 

---

四、组件的通信

   1、父传子

 （1）在父组件中的子组件标签添加属性

 （2）子组件在js中通过properties接收即可

Component({
     properties: {
        totalMoney: Number
      }
})

   2、子传父

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

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

 

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

 Component({
     properties: {
        totalMoney: Number
     },
     methods:{
         //子组件事件
         btnclick(){
            console.log('aaaaaaaaaaaaaaaaaaa');
            this.triggerEvent("submit", 'Hello lily')
        }
     }
})

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

---

《剧终》