微信小程序组件的使用

1.组件的使用

①在文件的根目录下新建文件夹
②右键 新建Component
③在页面中引用
xxx.json
“usingComponents”: {
“item”:"/components/item/index"
}
④使用组件
xxx.wxml

   <item></item>

2.插槽

1）默认插槽

<item>
    <text>嵌套内容</text>
	<slot></slot>//插槽
</item>

2）具名插槽
①找到组件的js
options: {
multipleSlots: true, //开启多个插槽
}
②传入

<text slot="pre">￥</text>
<text slot="next">RMB</text>

③接受

<slot name="pre"></slot>
<slot name="next"></slot>

3.组件的样式

1）组件的样式 默认是相互隔离
2）配置样式隔离
放在组件的xxx.js中，在options中编写
options: {
multipleSlots: true, //开启多个插槽
styleIsolation: “isolated”,
//isolated隔离，apply-shared子可以用 父,shared相互影响
},
3)外部类
①组件中
xxx.js中定义：
externalClasses:[“item-class”],
wxml模板中使用 在类中添加
class=“item item-class”
②页面
wxml定义

<item title="外部类"  item-class="myclass"></item>

wxss 定义css
.myclass{
height: 200rpx !important;
color:#f00 !important;
}

4.组件中的参数传递

1）传递（参数是只读）

<item title="标题">

2）组件中获取

properties: {
    "title": {
      type: String, 数据类型
      value: '' //默认值
    },
}

3）页面中使用
{{title}}

5.事件传递

1）子元素发送事件
this.triggerEvent(“事件名称”,“事件对象”)
2）父元素监听

<item bind:事件名=“处理函数”>

3）function 处理函数(e){
// e就是事件对象
}

第三方组件

1.npm使用

① 在项目中 npm init -y 创建package.json
② 详情，本地设置，使用npm模块
③3. 工具，构建npm

1.weapp使用

①安装
npm i @vant/weapp -S --production
②页面中 xxx.json配置
usingComponents": {
“van-button”: “@vant/weapp/button/index”
}
③页面中使用

<van-button></van-button>