小程序组件创建
在components文件夹下创建组件 例如 : 如下
使用方式(全局)
在app.json "usingComponents": { "对应组件名": "对应的组件" },
进行相关配置 在全局就可以使用
使用方式(局部)
上面的方式是全局注册类似于vue项目中 在main.js中 通过vue.component('组件名','组件') 的注册方法
局部的话在需要使用的界面的json中进行注册 和上面的方式一样
例子:
修改子组件的样式
在vue中使用element-ui 或者使用vant 或者是使用其他第三方的组件库 在对组件库的样式出现不满意的情况都会考虑覆盖修改 一般使用 scss就会使用 ::v-deep 或者 :deep() 但是在小程序中没有
小程序样式修改的方式
在子组件中需要通过
js
// components/navigation-bar/navigation-bar.js
// 组件 的使用 局部注册 在json => usingComponent:{ }
Component({
// 小程序支持外界的样式
// 组件 允许外界来定制类 将对应的类暴露出去
externalClasses: ['custom-class', 'title-class',]
// 需要通过这样的方式将对应的样式暴露出去
}
})
在父组件需要
wxml
<navigation-bar back custom-class="custom-class"/>
<!-- 暴露出来的类 就是对应的属性 直接赋值父组件的类就ok 类名完全可以随便写 -->
wxss
.custom-class {
color:aqua
}
组件的通信(父传子)
与vue中的使用大致相同 , 但有一点不同的是 我如果直接传过去一个属性 这个属性没有值 默认是Boolean
值并且为true
组件的通信(子向父)
父组件定义数据<navigation-bar count="{{count}}" back custom-class="custom-class" />
子组件接收数据 使用properties
js
// components/navigation-bar/navigation-bar.js
// 组件 的使用 局部注册 在json => usingComponent:{ }
Component({
// 小程序支持外界的样式
// 组件 允许外界来定制类 将对应的类暴露出去
externalClasses: ['custom-class', 'title-class',],
/**
* 组件的属性列表
*/
options: {
multipleSlots: true
},
properties: {
// back: Boolean
// 小程序中子组件 收父组件的数据 默认值使用value属性来声明 不是vue的default
back: {
type: Boolean,
value: false
},
count: {
type:Number,
value:0
},
// 在小程序中接受数据 需要通过 value当默认值 在vue中使用的是default 这个地方要注意
value: Number,
},
})
修改数据使用的是this.triggerEvent('父组件绑定的事件名',传过去的值)
这一点在vue中使用的是this.emit()
用法是一模一样的
js
// 子组件事件传值
decrement() {
this.triggerEvent("update-count", this.properties.count - 1)
},
wxml
<navigation-bar bind:update-count="updatecount" count="{{count}}" back custom-class="custom-class" />
// 父组件接受
js
updatecount(e) {
console.log(e.detail);
this.setData({
count: e.detail
})
},
// 进行修改