小程序组件数组_小程序，自定义组件之间的引用，使用插槽扩展组件

接着上篇 小程序&＃xff0c;组件与模板对比&＃xff0c;及其简单使用 &＃xff0c;这篇我们继续说自定义组件。

一.自定义组件之间的调用&＃xff1a;

首先&＃xff0c;先按上篇的步骤建好scroll-comp组件&＃xff0c;把index.wxml中的左右滑动图片部分代码拷贝到

scroll-comp.wxml中,把index.wxss中对应的样式拷贝到scroll-comp.wxss中,index.js中对应的图片数组也拷贝到scroll-comp.js中。

scroll-comp.wxml页面。

scroll-comp.wxss:

.comview{

margin-top: 15rpx;

}

.scroll{

display: flex;

white-space: nowrap;

height: 300rpx;

}

scroll-comp.js:

/**

* 组件的初始数据

*/

data: {

imgscroll:["../../images/xiaochengxu01.png","../../images/xiaochengxu03.png","../../images/xiaochengxu02.png"]

},

其次&＃xff0c;在上篇中的list-comp.json配置文件配置scroll-comp组件。

最后&＃xff0c;在list-comp.wxml中直接使用 配置好的组件名称(scroll-comp)&＃xff0c;index.xml页面也使用该组件替换原来左右滑动图片的那部分代码。

效果&＃xff1a;

1.主页效果&＃xff1a;

肉类页面效果&＃xff1a;

二.使用插槽slot扩展定义组件&＃xff0c;使用过vue的同学应该都能理解。

所谓插槽就是在不修改组件内部代码情况下&＃xff0c;还能在外面按需扩展。这样就不会影响到原来使用了该组件的地方。

插槽使用步骤&＃xff1a;

1. 单个插槽使用&＃xff0c;这种情况slot不用使用name属性。小程序自己会匹配。

在scroll-comp.wxml最后面加入&＃xff1a;

1. 多个插槽使用&＃xff0c;例如我想在scroll-comp组件最上方和最下方添加按钮&＃xff0c;那么先要在最上方使用用slot,然后最下方也用slot。然后分别给他们取上名字。最后还有要在scroll-comp.js里添加上options&＃xff0c;这样该组件才支持多个插槽。

1. 在index.wxml页面中写上两个按钮&＃xff0c;然后在使用slot属性指明用于哪个slot。

总结&＃xff1a;

1. 组件之间引用&＃xff0c;主要是要配置.json文件中的 "usingComponents"。
2. 组件扩展&＃xff0c;是使用slot插槽扩展组件原来没有的功能&＃xff0c;不影响组件原来代码。

谢谢大家浏览&＃xff0c;喜欢的点个赞或者关注下&＃xff0c;虽然都只是入门级别的&＃xff0c;但只有入门级别的掌握好了才能往上走。以前看别人技术博客&＃xff0c;觉得几分钟就看完&＃xff0c;殊不知别人花了多少时间写。

我是只说代码的大饼&＃xff0c;不要只是写代码时想起我&＃xff0c;饿了也可以想起我。