自定义组件与组件传值

自定义组件:自己开发组件，然后再项目中多处复用，提高开发效率，这也是组件化的核心思想

快速创建一个组件的步骤：

1、新建的组件构造器：

Component({

})

2. 文件类型也有4个:wxml,json,js,wxss

#### 3. 在需要的页面xxx.json或全局app.json配置文件中引入自定义组件，例如：cate.json   

{
  "usingComponents": {
    "Dialog":"/components/dialog/dialog"
  }
}

将Dialog显示到wxml视图上 例如：cate.wxml

<Dialog-box />

组件之间如何通讯：

小程序如何获取子组件的实例呢
this.selectComponent(‘选择器名称’)

例如： this.dialog=this.selectComponent(’#dialog’) //通常写在onLoad
小程序组件通讯实现方式

第一种：父传子:

传：

 <Dialog-box 
      id="dialog"
      title="订单信息"
      content="订单支付内容"
  />

接：

Component({
 ...
  properties: {
    //要接收的属性
    title:{
      //接收的类型
      type:String,
      //接收的默认值
      value:"此处应该有一个标题"
    },
    content:{
      type:String,
      value:"此处应该是内容"
    }
  },
  ....
})

第二种：子传父：

主要通过事件派发，监听模式
Vue：this.$emit(‘自定义的事件名’,要传递的值)
小程序：this.triggerEvent(‘自定义的事件名’,要传递的值,事件选项)

子派发事件：triggerEvent

 //确定逻辑
    confirm_btn() {
      //向父级派发confirm事件
      this.triggerEvent('confirm','您点击确定啦')
    },

父监听：

<Dialog-box 
      id="dialog"
      title="订单信息"
      content="订单支付内容"
      bind:confirm="myconfirm"
      bind:cancel="mycancel"
  />

第三种：兄弟之间：主要通过利用父级组件当桥梁，来实现兄弟组件通讯

和vue的兄弟传值差不多，就是中间的枢纽变为了父组件，（其实就是太麻烦，作者不想写了）