小程序组件，样式隔离

一、小程序组件solt

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支持
  }
  ....
 })

二、小程序样式隔离

小程序的样式隔离：

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

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