Escreva subcomponentes (veja a caixa pop-up como exemplo)
xml
<view class="popbg" wx:if="{
{showPop}}">
<text>{
{
popText}}</text>
</view>
css :
.popbg{
width: calc(80% - 2rem);
margin: 2rem 10% 0;
padding: 0.7rem 1rem;
background: #fff;
border: 1px solid rgb(0,255,0);
text-align: center;
border-radius: 10rpx;
position: fixed;
top: 0;
left: 0;
z-index: 100000;
}
.popbg text{
color: rgb(15, 161, 40);
}
Adicione a seguinte configuração ao arquivo json nesta página
{
"component":true
}
Edite a parte js do componente
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
- 页面的初始数据
*/
data: {
showPop:true
},
properties: {
popText: {
type: String,
value: '组件默认内容'
},
},
/**
- 在组件实例进入页面节点树时执行
*/
attached() {
var _this = this;
console.log(1111)
setTimeout(function () {
_this.setData({
showPop: false })
_this.handleClose()
}, 1000)
},
methods:{
handleClose(){
console.log("处理关闭内容")
var showStatus={
msg:'已成功关闭'}
this.triggerEvent('myevent', showStatus)
}
}
})
Depois que o componente filho é escrito, o componente pai é introduzido
Escreva o componente pai
Primeiro registro em json
{
"usingComponents": {
"pop": "../components/pop/infoShow"
}
}
Vários componentes personalizados podem ser introduzidos em uma página. O método de escrita é o seguinte:
"usingComponents": { "pop": "... / components / pop / infoShow", "alert": "... / components / alert / alert " } Você também pode registrar componentes globais, " usingComponents " em app.json : { " pop ":"… / components / pop / infoShow " }
Introduzido no arquivo xml
<view class="container">
<button type="primary" catchtap="clikShowPop">点击</button>
<text style="margin-top:3rem;color:red" wx:if="{
{showTips}}">{
{
childMsg}}</text>
<pop id="popInfo" bind:myevent="showStatus" wx:if="{
{showPop}}" popText="{
{infoMsg}}"></pop>
</view>
A parte js do componente pai:
Page({
data: {
infoMsg:'',
popInfo:'',
showPop:false,
showTips:false,
childMsg:''
},
//点击按钮事件
clikShowPop(){
this.setData({
showPop: true,
infoMsg:'点击成功',
})
},
//弹框消失时触发父组件的事件
showStatus(e){
// console.log(JSON.stringify(e))
this.setData({
showTips:true,
childMsg: e.detail.msg //接受子组件传递的参数时要用e.detail去接收
})
},
onLoad() {
this.popInfo = this.selectComponent('#popInfo') //获取组件对象,调用子组件内部函数时就可以用this.popInfo.handleClose()去调用了
}
})
Até agora, um componente personalizado simples está encapsulado
Observações sobre componentes personalizados:
- Componente A parte comum da página é o componente personalizado da página é um componente
- opções
- dados: As constantes no componente filho podem ser controladas por this.selectComponent ('# popInfo')… setData ({showPop: false}) no componente pai
- propriedades é o valor passado pelo componente pai para o componente filho
- anexado é uma função do ciclo de vida
- métodos é a função encapsulada no componente filho. O
componente filho pode chamar this.triggerEvent ('myevent', data) para acionar a função do componente pai, semelhante a este. $ emit ('myevents', data) em vue, dados são dados transmitidos. Funções de ligação pai e filho por meio de bind: myevent = "showStatus", que é
equivalente a @ myevent = "showStatus" em vue.
Sobre o ciclo de vida dos componentes: Para obter
mais detalhes, consulte https: //developers.weixin.qq. com / miniprogram / dev / framework / custom-component /
não será descrito em detalhes aqui