微信小程序自定义组件

最新推荐文章于 2022-09-05 06:30:00 发布

偷轮子

最新推荐文章于 2022-09-05 06:30:00 发布

阅读量262

点赞数

分类专栏：微信小程序

本文链接：https://blog.csdn.net/qq_20411471/article/details/112752687

版权

微信小程序专栏收录该内容

27 篇文章 3 订阅

订阅专栏

一.什么是自定义组件

类似于页面，自定义组件拥有自己的 wxml 模板和 wxss 样式，组件模板的写法与页面模板相同。组件模板与组件数据结合后生成的节点树，将被插入到组件的引用位置上。在组件模板中可以提供一个 <slot> 节点，用于承载组件引用时提供的子节点。

二、如何编写自定义组件

自定义组件和普通页面一样，都有wxml、wxss、json、js文件，不同的是对于自定义的组件，需要在json配置文件中声明为一个组件，另外在组件模板中可以提供一个slot节点，用于承载组件引用时提供的子节点。

1、定义wxml文件

/*child*/
<!-- 组件模板 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>/*用于承载组件引用时提供的子节点，就是在引用页面的组件内编写的标签内容，将被传递在slot的位置》*/
</view>

2、修改自定义组件的json文件

{
  "component": true,//将组件定义为true
  "usingComponents": {}
}

三、如何引用编写的自定义组件

1、修改引用页面的json文件

{
  "usingComponents": {
    "component-child": "/components/component-tag-name"/*将刚才编写的组件引用过来，注意自定义组件的路径，同时定义组件名称为component-child*/
  }
}

2、在wxml文件中引用自定义组件

/*parent*/
<view>
  <component-child>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </component-child>
</view>

四、如何向自定义组件传递数据

与普通的 WXML 模板类似，可以使用数据绑定，这样就可以向子组件的属性传递动态数据。

为便于理解以下引用页面称为父页面，自定义组件称为子页面。

1、父页面定义传递的变量

注意在向子页面传递数据的父页面，此处的红框内的属性名为向自定义组件child传递数据的属性名，父页面向子页面传递数据其实有两个过程。

1、父页面的数据绑定由js渲染至前端页面，就是将绿色的框内的值传递给红色框的属性。

2、红色框的属性将值传递给子页面js中的properties（在子页面的properties对象中定义接收变量，注意properties中的变量名须与父页面中传递变量的属性名一致(上图中的红色框的名)，否则无法成功接收数据）

3、子页面渲染properties中的属性。

2、子页面接收从父页面传递过来的值

<!--子页面的js,child.js-->
Component({
  /**
   * properties用于接收从父页面传递过来的变量，
注意定义的变量名要与父页面传递过来的变量名一致。
   */
  properties:{
    name: {
      type:String,
      value:"小明"//可以定义默认值value,此处虽然默认值为value，但是父页面同样传递过来一个name,将默认值小明覆盖。
    },
    age:Number
  },

  /**
   * 组件的初始数据
   */
  data: {

  },
  /**
   * 组件的方法列表
   */
  methods: {

  }
})
<--child.wxml渲染从父页面传递过来的数据-->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <text>name: {{name}}</text>
  <text>age: {{age}}</text>
  <slot></slot>
</view>

五、自定义组件的slot

在组件的 wxml 中可以包含 slot 节点，用于承载组件使用者提供的 wxml 结构（父页面在引用自定义组件时，组件中的wxml结构将显示在slot的位置）。默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 js 中声明启用。

1、声明启用多个slot

<!--child.js-->
Component({
  /**
   * 组件的属性列表
   */
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: {
    name: {
      type:String,
      value:"小明"
    },
    age:Number
  }
})

2、使用不同的name来区分slot

<!--child.wxml-->
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
</view>
<!--parent.wxml-->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>
</view>

六、关于自定义组件的样式

组件对应 wxss 文件的样式，只对组件wxml内的节点生效。编写组件样式时，需要注意以下几点：

组件和引用组件的页面不能使用id选择器（#a）、属性选择器（[a]）和标签名选择器（否则会导致父页面和子页面的标签样式同时生效），请改用class选择器。
组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
继承样式，如 font 、 color ，会从组件外继承到组件内。
除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。