小程序自定义模板和自定义组件

1.自定义模板(方便复用)

• 封装模板

1. 先建立public文件，在这个文件里再建一个，在这个文件里创建一个xxx.wxml,xxx.wxss,在父组件里用import 引入(引入的是:public里边创建的xxx.wxml , xxx.wxss )
   public创建文件图片:
   

在父模块里用import引入:
<import src="/public/template/movie_item/movie_list.wxml" />

2. 父模块接受子模块：
   
3. is 后边的名字随便起但是必须跟子模块里边的name对应的值一样，data是传送数据，

<template name="movie_item">
	<image src="{{images.small}}"></image>
	<view style="font-size:12px">{{title}}</view>
</template>

2. 自定义组件

• 自定义组件

  • 子组件如何创建

  创建和使用组件的步骤：
  第一步：就是先创建一个component文件夹【新建component】选项
  第二步：引入组件
  
  	把引入的父组件中的xxx.json文件的usingComponents添加要使用的子组件
  例如:
  {
  	"usingComponents":{
  		 "组件名":"要引入的子组件路径",
  		 "FirstItem":"/components/first_item/first_item"
  	}
  	"navigationBarTitleText": "首页"
  }
  第三步:就是在父组件里直接使用子组件的标签名：<FirstItem/>
  

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

• 子向父传递事件:

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

• 微信小程序组件通讯的方式也有三种：

  • 第一种是：父传子
    在子组件里通过properties接受属性（实现方式类似于vue）

  父传子步骤：
  引入子组件
  在子组件上添加自定义属性 例如：title,content
  在子组件上的properties上添加要接收的属性 title,content
  在子组件上通过{{ }}就可以直接使用啦。。
  

• 子第二种是：子传父
  通过: this.triggerEvent(‘事件名’,选项1,选项2) 类似于vue中的this.$emit(‘要派发的事件名’，要传递数据) – >{实现方式类似于vue}

1.首先在子组件里给一个触发事件 例如：catchtap="submit"
2.在对应的submit上添加派发的事件和要向父级传递的数据
this.triggerEvent('submit','ok')
this.triggerEvent('cancel','no')
3.父组件监听子组件派发过来的事件和要接收的数据
  bind要监听的事件名=“回调方法”
  例如：
  
    <FirstItem
     bindsubmit="submit"
     bindcancel="cancel"
 />
 
4.在父组件的js中接收数据
 //监听确定按钮触发的回调
 submit(e) {
    console.log('监听确定',e.detail)
  },
  cancel(e){
    console.log('监听确定',e.detail)
  }

• 第三种是：兄弟之间

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

A-->C--->B

• 组件的插槽的使用

1、如果要开启多个插槽那么需要在组件里面进行配置：

options:{
	multipleSlots:true
}

2、使用slot定义模板插槽

<view class="page">
  <slot name="first" />
  <view>{{message}}</view>
  <view>{{number}}</view>
  <button size="mini"  bindtap="onAddClick" >按钮</button>
   <slot name="secend" />
</view>

3、在组件内部引用，通过使用name指定插槽的位置

  <my-test message="{{message}}" bind:addNumber="addNum" number="{{number}}">
    <view slot="first">我是first插槽内容</view>
    <view slot="secend">我是secend插槽内容</view>
  </my-test>