微信小程序 - 自定义组件

定义

1. 在组件的 json 中配置 component：true
2. 在组件的 js 中用 component() 注册组件

使用

1、在页面的 json 中引入组件

{
  "usingComponents": {
    "component-tag-name": "path/to/the/custom/component"
  }
}

2、页面中应用

`<view>
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>`

插槽

1、单插槽

<!-- 组件模板 -->
<view class="wrapper">
  <view>这里是组件的内部节点</view>
  <slot></slot>
</view>

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
    <view>这里是插入到组件slot中的内容</view>
  </component-tag-name>
</view>

2、多插槽

//组件的js
Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

<!-- 组件模板 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>这里是组件的内部细节</view>
  <slot name="after"></slot>
</view>

<!-- 引用组件的页面模板 -->
<view>
  <component-tag-name>
    <!-- 这部分内容将被放置在组件 <slot name="before"> 的位置上 -->
    <view slot="before">这里是插入到组件slot name="before"中的内容</view>
    <!-- 这部分内容将被放置在组件 <slot name="after"> 的位置上 -->
    <view slot="after">这里是插入到组件slot name="after"中的内容</view>
  </component-tag-name>
</view>
组件样式

css书写注意事项

• 可以用 :host 选择器设置默认样式
• #a { } /* 在组件中不能使用 */
• [a] { } /* 在组件中不能使用 */
• button { } /* 在组件中不能使用 */
• .a > .b { } /* 除非 .a 是 view 组件节点，否则不一定会生效 */

组件样式隔离

Component({
  options: {
    styleIsolation: 'isolated'
  }
})

page与组件的通信

1、page -> component

//page(传值)
<component-name property-name="{{name}}"></component-name>

//component.js(取值)
Component({
	properties: {
		propertyName: {
			type: String, //参数类型
			value: "" //默认值
		}
	}
})

2、component -> page

//page
<component-name bind:onDataChange=" dataChange "></component-name>

//component.js(取值)
page({
	dataChange: function(event){
		let count = event.detail 
		console.log(count) // 10 
	}
})

//component.js
component({
	data: {
		count:10
	},
	onReady: function(){
		let count = this.data.count
		this.triggerEvent("onDataChange",count,{})
	}
})

3、获取组件实例

api

• this.selectComponent(" selector ") //得到跟选择器匹配的唯一一个或第一个组件实例
• this.selectAllComponent(" selector ") //得到跟选择器匹配的所有组件实例

//page.wxml
<component-name id="my-component"></component-name>

//page.js
Page({
	onReady: function(){
		let child = this.selectAllComponents('#my-componet')
		child.setData({
			count: 100
		})
		var childCount = child.data.count
		console.log(childCount) // 100
	}
})

注意 ：默认情况下，小程序与插件之间、不同插件之间的组件将无法通过 selectComponent 得到组件实例（将返回 null）,这种情况下我们可以按下面示例实现

// 自定义组件 my-component 内部
Component({
  behaviors: ['wx://component-export'],
  export() {
    return { myField: 'myValue' }
  }
})