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

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

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.其间是有我们定义的子组件来给父组件（我们使用组件的页面）来发送传递参数或者事件，由父组件（我们使用组件的页面）来决定怎么用传递过来的数据