微信小程序组件传值，模板

一、小程序组件复用

1. 组件是什么

组件：具有完整功能（html-视图,css-样式,js-逻辑），并且独立运行的模块
插件：通常是为了完成某项具体的业务功能而开发的js文件 例如：swiper.js,弹框.js，。。。。
类库：library,是提供了为了完成项目的工具方法的集合，跟具体的业务无关！ 例如：jQuery,lodash.js
框架:framework,分 是为了快速完成项目搭建的基础。框架分：UI 框架和javaScript框架
   UI框架：boostStrap,Element UI,vant UI,iview,and Design.....
   javaScript框架：vue.js,React.js,Angular.js

2. 小程序组件分类

   1. 内置组件：小程序内置的组件，直接拿来就可以使用，无需安装

      例如：view,text,image,button,swiper,switch…

   2. 第三方组件:需要安装，引入，再使用

   推荐基于小程序的UI框架：vant UI，weui(腾讯自己的产品)
   
   官方文档地址：https://vant-contrib.gitee.io/vant-weapp/#/intro
   

   如何让小程序支持npm:

   1. 生成package.json:npm init -y

   2. 安装vant: npm i @vant/weapp -S --production

   3. 将 app.json 中的 "style": "v2" 去除

   4. 勾选开发者工具-详情–本地设置-npm模块

   5. 选择微信开发者工具-工具-构建npm

   6. 使用第三方vant组件

   ​ 第一步：在app.json或当前页面的json文件中的usingComponents引入

   ​ 第二步：在wxml页面上引入标签

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

      • 快速创建一个组件的步骤：
      1. 新建的组件构造器：

   Component({
   
   })
   
   

   	2. 文件类型也有4个:wxml,json,js,wxss
   	3. 在需要的页面xxx.json或全局app.json配置文件中引入自定义组件，例如：cate.json
   

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

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

       <Dialog-box />
      

      • 组件之间如何通讯：

        思考一下：在Vue中，如何通过父级组件改变子组件中的值？？？

        A.vue

        import .....
        components:{B}
        
        template
        	<B ref="b" />
        	
        mehtods:{
        	change() {
        	   this.$refs.b.hello()
        	}
        }
        

        B.vue

        methods:{
        	hello() {...}
        }
        

      • 小程序如何获取子组件的实例呢

      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兄弟组件传值:bus,vuex
        
        小程序：主要通过利用父级组件当桥梁，来实现兄弟组件通讯
        
        A：父组件：cate
        
          <A bind:A="myA"/>
          <B mynum="{{ num }}"/>
          
          
        B传给C兄弟
        
        B传A:
        
        wxml:
        <view>
          <text>我是A组件-{{ num }}</text>
          <view><button size="mini" bindtap="goToParent">把A的数据发送给B组件</button></view>
        </view>
        
        JS:
          goToParent() {
              this.triggerEvent('A',this.data.num)
            }
          }
          
          
          
        A传C  
          <A bind:A="myA"/>
          
            myA(e) {
            this.setData({
              num:e.detail
            })
          }
          
         C再将A接的值再接收:
         
         //父级代码：cate
           <B mynum="{{ num }}"/>
         
         
         C内部的代码：
        Component({
          properties: {
            mynum:{
              type:Number,
              value:99
            }
          },
        })
        
        <view>
          <text>我是B组件--{{ mynum }}</text>
        </view>
        

二、小程序组件slot

slot:用于在不破坏组件的情况下，给组件嵌入结构的一种方式

例如：dialog组件：
<view class="dialog_box" wx:if="{{ isShow }}">
   ....
    <slot name="a"></slot>
   ....
</view>

cate页面：
  <Dialog-box>
        <view slot="b">
          <text>安全</text>
          <text>高效</text>
          <text>便捷</text>
        </view> 
</Dialog-box>

注意：如果使用命名的slot，必须要开启多slot支持，代码如下：
Component({
  /**
   * 组件的属性列表
   */
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  }
  ....
 })

三、小程序样式隔离

回顾：vue中的样式隔离<style scoped></style>

小程序的样式隔离：

1.通过在组件的options中配置
Component({
  options: {
    styleIsolation: '隔离选项'
  }
})

其中【隔离选项】值包括：
isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（默认值）；
apply-shared 父级样式会穿透影响组件样式，但组件样式不会影响其他页面
shared：互相影响

2.外部样式类
	1.在app.wxss中定义一个class样式，例如：
		.box {
 			 background:#0ff;
		}
		
	2.如果将.box影响到组件内部呢？
     第一步： 在组件内部配置：
			Component({
  			externalClasses: ['my-class'],
  		}）
  		
  	第二步：在应用的父级组件的子组件标签上关联
  	  <Dialog-box  my-class="box"></Dialog-box>
  	  
  	第三步：应用my-class到对应的标签上
  	 <view class="my-class">{{ content }}</view>
  	 

四、小程序模板复用

1. 模板的适应场景

适应页面的展示，没有太复杂的逻辑交互的页面，可以存成模板，方便其他页面复用

通常模板页面：只有wxml,css，触发的逻辑要在父级页面来实现

2. 如何定义使用模板

第一步：定义模板

  定义步骤同创建普通页面一样
  <template  name="定义的模板名称">
    
      这里放普通的wxml标签

	</template>



第二步：使用模板
   在需要的页面中引入：
   <import src="指定要引入的模板路径" />
   在嵌入位置添加template来指定
    <template is="指定模板名称" data="{{ 指定要传入的数据}}"></template>
    
    其中：
       is:要引入的模板name名称
   
参考文档：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/template.html