微信小程序创建简单的自定义组件基础篇

微信小程序开发组件基础篇

1. 先创建一个用来存放组件的文件夹
   如图所示：
   
2. 在我们刚刚创建的组件里面随便写一个简单的组件作演示

3. 在这里多提一嘴，weapp使用

右键点击这个，选择 在资源管理器中显示，然后再黑框里输入 npm i @vant/weapp -S --production，等待安装完成即可
4. 然后回到我们刚才的组件文件夹








{{title}}



{{tip}}








// components/item/index.js
Component({
/**
5. 组件的属性列表
*/
//扩展类名
externalClasses:["item-class"],
properties: {
"title":{
type:String,
value:''
},
"icon":{
type:String,
value:''
},
"tip":{
type:String,
value:''
},
"toggle":{
type:Number,
value:0
},
"url":{
type:String,
value:'',
}
},
options:{
multipleSlots:true, //开启多个插槽
styleIsolation:"isolated", //样式格力 apple-shared子用父
},
/**
6. 组件的初始数据
*/
data: {
},
/**
7. 组件的方法列表
*/
methods: {
goto(){
if(this.data.url){
wx.navigateTo({
url: this.data.url,
})
}
},
toggleChange(e){
// console.log(e.detail.value)
//发送一个事件给父组件
this.triggerEvent("toggleChange",{value:e.detail.value})
}
}
})


8. 组件简单搭建完成，然后来看一下如何使用

   
   以这个临时文件为例，来看一下如何使用
   

// pages/user/user.js
在这个文件夹里我们添加对应的一些方法
data: {
flag:true, //用来控制图片组件的显示与隐藏
},
//这个方法是点击图片的时候，来修改图片显示的true/false，这个值来自于下方的子组件传递过来的值，由子组件负责传递给父页面，父页面来决定怎么用
showPic(e){
this.setData({
flag:e.detail.value
})
},


// components/item/index.js
methods: {
//组件把点击切换的事件传递给父组件，父组件来判断value值为true/false 来决定图片显示与否
toggleChange(e){
// console.log(e.detail.value)
//发送一个事件给父组件
this.triggerEvent("toggleChange",{value:e.detail.value})
}
}
})


总结：
流程就是：
1.先定义一个组件 components 在其下方创建一个自定义的组件
2.在我们需要使用组件的页面下方的XXX.json 文件里面引用
3.其间是有我们定义的子组件来给父组件（我们使用组件的页面）来发送传递参数或者事件，由父组件（我们使用组件的页面）来决定怎么用传递过来的数据