微信小程序自定义组件或模板（为了项目方便复用）

1.自定义组件或模板（为了项目方便复用）

自定义模板：

只复用wxml,css部分，不具有交互功能

• wxml引入代码:

<import src="classify.skeleton.wxml"/>

//使用 is 是为模块文件名
<template is="skeleton" />

• wxss代码:

//直接引入其他wxss样式
@import "./classify.skeleton.wxss";

自定义组件

• 子组件如何创建

一个完整独立的视图单元（wxml,css,js）

创建和使用组件的步骤：
第一步：创建一个组件：在子组件文件夹上--右建--选择【新建component】选项
第二步：引入组件

    在要引入的父组件中的json文件的usingComponents添加要使用的子组件
  
 例如：
 {
  "usingComponents": {
    "组件名":"要引入的子组件路径",
     "Dialog":"/components/dialog/dialog"
  },
  "navigationBarTitleText": "首页"
}
	
第三步：使用

   在父组件直接使用子组件的标签名：<Dialog />
   

• 父组件如何获取子组件中的数据或方法

• 子向父传递事件:

  this.triggerEvent('事件名',选项1,选项2) 类似于vue中的this.$emit('要派发的事件名'，要传递数据)
  

• 微信小程序组件通讯的方式：

  • 父传子

  实现方式类似于vue
  引入子组件
  在子组件上添加自定义属性 例如：title,content
  在子组件上的properties上添加要接收的属性 title,content
  在子组件上通过{{ }}就可以直接使用啦。。。
  

  • 子传父

  实现方式类似于vue
  1.在子组件上触发一个事件 例如：catchtap="confirmmFn"
  2.在对应的confirmFn上添加派发的事件和要向父级传递的数据
   this.triggerEvent('confirm','ok')
   this.triggerEvent('cancel','no')
  3.父组件监听子组件派发过来的事件和要接收的数据
     bind要监听的事件名=“回调方法”
     例如：
     
       <Dialog  
        bindconfirm="confirm"
        bindcancel="cancel"
    />
    
   4.在父组件的js中接收数据
    //监听确定按钮触发的回调
    confirm(e) {
       console.log('监听确定',e.detail)
     },
  

  • 兄弟之间

  A兄弟,B兄弟,C（父组件）三个组件
  
  A-->C--->B