小程序自定义组件-自己写一个dialog（弹出对话框）组件 （组件间通信与事件）

1 项目的创建和基本配置

1. 创建项目 并在根目录下创建components文件夹, 在里面创建dialog组件。
2. 引入组件 ，在page/index/index.json中引入组件。

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

4. 引入成功后 就可以在index页中使用了
5. 我需要一个按钮点击后显示dialog组件, 在page/index/index.wxml中创建一个按钮。
   

2 组件的布局样式编写

布局和样式的展示效果

我们子组件的值是可以从外部以属性的方式传入的，一共有 四个属性： title，content， cancelText，confirmText

// 子组件
  /**
   * 组件的属性列表
   */
  properties: {
   
    title:{
   
      type: String,
      value: '提示'
    },
    content: {
   
      type: String,
      value: '编程学习是我的兴趣爱好'
    },
    cancelText: {
   
      type: String,
      value: '我知道了'
    },
    confirmText: {
   
      type: String,
      value: '我会坚持下去的'
    }
  },
  ....

3 逻辑部分编写-组件的显示

• 弹出框默认是隐藏的，只有点击后才会显示。所以需要在dialog组件的data里定义一个isShow变量控制组件的显示和隐藏。
• 然后定义一个方法修改isShow,控制组件的显示。

<!-- 子组件 -->
<view class="wx_dialog_container" hidden="{
    {!isShow}}">
  <view class="wx-mask"></view>
  <view class="wx-dialog">
    <view class