小程序中组件的创建及引入使用

小程序中组件创建及引入使用

• 创建
  • 在miniprogram文件夹下创建components组件文件夹，在components文件夹，单击鼠标右键>新建Component>输入组件名称>创建成功
• 引入
  • 在需要用到的page的json文件中配置

  {
    "usingComponents": {
      "M-music": "/components/music/musicList" //M-music为自定义的标签名字，后面是创建好的组件路径
    }
  }
  

• 使用

  <M-music></M-music>
  

小程序中组件传值

• 组件传值
  • 定义

  <M-music playList="{{item}}"></M-music>
  

  • 接受

  properties: {
      playList: {
        type: Object
      }
  }
  

  • 使用

  <view class="playList-content">
    <image src="{{playList.picUrl}}"></image>
    <text>{{playList.playCount}}</text>
    <view>{{playList.name}}</view>
  </view>
  

小程序中组件监听数据

 observers: {
 //如果监听对象可以写成playList(val),如果是监听对象的属性值，可以写成下面这样
	 ["playList.playCount"](val) {//对playList的playCount属性进行监听
	  	//发生变化是，执行
		this.setData({
		  	_count: this._tranNumber(val, 2)
		})
	  }
 },

• 在监听变化后重新赋值时不可直接赋值，会陷入死循环，要在data中新定义一个数据，在将值赋给data中的数据