微信小程序学习笔记-自定义组件

组定义组件方式

• 方式一: 局部注册

• 方式二: 全局注册

• 自定义组件位置
  

• 定义组件

<!--/components/home/home.wxml -->
<view>
  <block wx:for="{
    
     
     {nav}}" wx:key="*this">
    <text class="item">{
  
   
   {item}}</text> 
  </block>
</view>

• 开启组件配置 目的就是允许外部注册组件

// /components/home/home.json
{
   
    
    
  "component": true, // 必须设置true 
  "usingComponents": {
   
    
    }
}

• 局部注册组件 哪里使用 哪里注册

// /pages/index/index.json
{
   
    
    
  "component":true,
  "usingComponents": {
   
    
    
    "home-cpn":"/components/home/home"
  }
}

• 使用组件

<!-- /pages/index/index.wxml -->
<view>
  <home-cpn></home-cpn>
  <home-cpn></home-cpn>
</view>

显示

• 全局注册组件

// /app.json
{
   
    
    
 "usingComponents": {
   
    
    
    "home-cpn":"/components/home/home"
  }
}

// /pages/index/index.json
{
   
    
    
  "component":true
}

组件样式隔离机制

• 组件内部默认采用styleIsolation:isolated。如果组件内部使用class类样式名称和页面class类样式名称相同，互不影响。

组件使用类样式.item

<!-- /components/home.home.wxml -->