微信小程序中组件components的使用

微信小程序中组件components的使用

1、在微信小程序的根目录中创建components文件夹,并创建相应的目录然后在目录中新建components;下面附上图片目录配置图片

注意新建components前创建文件夹

在需要使用该组件的文件夹中的.json文件中

	"usingComponents": {
    	"shop-msg": "/components/shop-msg/shop-msg"
  	}
//需要使用多个组件的时候
{
  "usingComponents": {
    "w-swiper": "/components/w-swiper/w-swiper",
    "w-recommend": "./childCpns/w-recommend/w-recommend",
    "w-feature": "./childCpns/w-feature/w-feature",
    "w-tab-control": "/components/w-tab-control/w-tab-control",
    "w-goods": "/components/w-goods/w-goods",
    "w-back-top": "/components/w-back-top/w-back-top"
  }
}
	//在wxml中使用的话
	<shop-msg  />

组件中的样式只需要在组件的wxss中配置即可

组件化开发怎么能少的了js文件的配置和参数的传递呢


	//组件的wxml中
	<view class='goods-item' wx:for="{{ list}}" wx:key="index" data-id="{{ index}}"  bindtap='get_msg'>{{ item }}</view>
	//组件的js中
	Component({
	  properties: {
	    list: {      //调用处传来的参数
	      type: Boolean,	// 类型(必填),目前接受的类型包括:String, Number, Boolean, Object, Array, null(表示任意类型)
	      value: [] 	// 属性初始值(可选),如果未指定则会根据类型选择一个
	    }
	  },
	  data: {
	  },
	  externalClasses: ["icon"],
	  methods: {
	    get_msg(){
	      //组件中事件
	      // 1.获取iid
	      const id = e.currentTarget.dataset.id;
	      // 2.跳转到对应的路径
	      wx.navigateTo({
	        url: '/pages/detail/detail?id=' + id,
	      })
	      //或者传递信息
	      this.triggerEvent('f_get_id', id)   //f_get_id是父组件中需要接受事件的名字
	
	    },
	  }
	})

//在父组件中的wxml
<shop list="{{ list}}" bing:f_get_id="get_id"/>     //get_id是在调用页面的js中实现的方法

//父组件的js中
get_id(a){
	console.log(a);
}
  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值