微信小程序组件

---

组件的使用

1. 新建组件

右键 新建Component

1. 引用

xxx.json
  "usingComponents": {
    "item":"/components/item/index"
  }

1. 使用

	<item></item>

插槽

1.默认插槽

<item>
  <text>嵌套内容</text>
</item>

组件内部
<slot></slot>

2.具名插槽

1、

组件的js的options中定义
    options: {
        multipleSlots: true, //开启多个插槽
    },

2、

传入
<text slot="pre">$</text>
<text slot="next">美元</text>

3、

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

样式

1. 组件的样式默认相互隔离
2. 配置样式隔离

组件的js的options中定义
    options: {
        styleIsolation: "isolated",
    },

isolated 相互隔离
apply-shared 父可以影响子
shared 相互影响

3. 外部类
   1、组件

js定义（外部扩展类）
externalClasses:[“item-class”],
wxml模板中使用
class=“item item-class”

2、页面

wxml定义
<item title="外部类" item-class='myclass'>
</item>
wxss定义样式
.myclass{
    height: 200rpx !important;
    color: #f00;
}

参数

传递(传递的参数是只读的)
<item title="标题"></item>
获取
 properties: {
        "title": {
            type: String,//数据类型
            value: '',//默认值
        },
}
使用
{{title}}

事件传递

子元素发送事件
this.triggerEvent("事件名称","事件对象")
父元素监听
<item bind:事件名="处理函数"></item>
function 处理函数(e){
//e就是事件对象
}

Component

1. externalClasses
   外部类
2. properties
   传入的参数(只读)
3. options
   选项
   multipleSlots: true, //开启多个插槽
   styleIsolation: “isolated”,
   //isolated相互隔离，apply-shared父可以影响子，shared相互影响
4. data
   数据
5. methods
   组件的方法

vant组件的使用

1. 在项目中npm init -y 创建package.json
2. 安装

npm i @vant/weapp -S --production

3. 详情–>本地设置–>使用npm模块
4. 工具–>构建npm
   自动生成目录
5. 配置：

"usingComponents": {
  "van-button": "@vant/weapp/button/index",
}

6. <van-button type="default">默认按钮</van-button>