微信小程序自定义组件Component的代码详解

"usingComponents": {
"item":"/components/item/item"
}

<item></item>

<view class="cell cell-class">
</view>

/* pages/com/com.wxss */
.cell{
  color: tomato;
}
.mycell{
  color: #f70;
  line-height: 120rpx !important;
}

  /* 选项 */
  options:{
    /* 样式隔离：apply-shared 父影响子
    shared 父子相互影响   isolated 相互隔离
    */
    styleIsolation:'isolated',
  },
  //通过组件的外部类实现父组件控制自己的样式
  externalClasses:["cell-class"],

<cell></cell>
<cell cell-class="mycell"></cell>

 <view class="cell">
  我是cell组件
  <slot></slot>
</view>

  /* 选项 */
  options:{
    //允许多个插槽
    multipleSlots:true,
  },

.cell{
  height: 88rpx;
  line-height: 88rpx;
  border-bottom: 1rpx solid #cccccc;
}

<cell>
  <text>放假</text>
  <text>快点到来</text>
</cell>

 <view class="cell cell-class">
  <slot name="pre"></slot>
  我是cell组件
  <slot></slot>
  <slot name="next"></slot>
</view>

  /* 选项 */
  options:{
    //允许多个插槽
    multipleSlots:true,
  },

.cell{
  height: 88rpx;
  line-height: 88rpx;
  border-bottom: 1rpx solid #cccccc;
}

<!-- 插槽 -->
<cell>
  <text slot="pre">
相关文章
C#/.net程序调用Python的教程分享
详解WPF中用户控件和自定义控件的使用
vue子组件封装弹框只能执行一次的mounted问题及解决
vue3 使用defineAsyncComponent与component标签实现
C语言实现数独程序的示例代码
Vue组件渲染与更新实现过程浅析
WPF自定义控件的实现
Flutter高级玩法Flow位置自定义
解决vue-cli-service不是内部或外部命令也不是可运行
C语言执行程序时遇到的常见问题及解决
uni-app开发微信小程序之H5压缩上传图片的问题详解