Custom Components
1. Create a reference to the assembly
1. Create the component
① in the root directory of your project, right mouse button, create components -> test folder
② in the new components -> test folder, right mouse button, click on the "New Component"
③ is after naming the new component, the component automatically generates a corresponding four files whose names are .js, .json, .wxml and .wxss
2. The reference component
① need to refer to the components in the page, locate the .json profile page, the new node usingComponents
② In usingComponents by the form of key-value pairs registered component; component name key is registered, the value of the component relative to a reference path
③ in .wxml file page, the component name registered to use the label form on the page, you can display the component to the page
3. Use the style landscaping components
Component corresponds wxss style file, only the entry into force of nodes within the assembly wxml. When writing style components, note the following:
① page components and assemblies can not use a reference id selector (#a is), attribute selector ([A]), and the tag selector, use class selector.
② page reference to the component assembly and in some extreme cases there will be unintended performance using descendant selectors (.a .b), in case, please be avoided.
③ sub-element selector (.a> .b) can be used only between a node and its child view components, the other components may lead to unintended.
④ inheritance pattern, such as font, color, will inherit from the outer component into the assembly.
⑤ In addition to inheriting style outside, app.wxss in the style of the page where the component style is not valid for custom components.
data and methods 2. assembly
1. Use of a private property data definition component
Page data is defined in Page () function in
Data definition component in Component () function in
In .js assembly:
If you want to access data in the property, directly this.data. Data name to
Weak country to re-assign the data in the data call this.setData ({Data Name: The new value}) to
In .wxml assembly:
If the data in the data to be rendered directly using {{name}} data to
2. Use the methods defined component event handler
Event handler component, must be defined in the method node.
properties 3. components
Role (1) properties of
The props vue similar components, the applet components Properties, the external properties of components is to receive the data transmitted to the external components.
In the applet, similar properties and data usage, they are readable and writable . but:
prefer data storage component private data
properties tend stored outside the data transmitted to the assembly
Both methods (2) a statement of properties
(3) pass a value for a component properties
Binding can be used in the form of data, transmitting data to the dynamic properties subassembly.
When defining properties, property name written using hump (properCount);
In wxml, the attribute value is specified, a corresponding writing a hyphen (proper-count = "attr value");
When applied to binding data using writing hump (attr = "{{properCount}}").
Example: reference page template components
.wxml:
.js:
(4) modify the value of properties in the assembly
The value of properties is readable and writable, it is used almost identical with the data, it is possible to modify the attribute values of any properties by setData
properties:{
count:Number
},
methods:{
add:function() {
this.setData( { count:this.properties.count + 1 } )
}
}
4. Data Listener
Data listener may be used to listen and respond to any changes in the attribute and a data field, thereby performing a specific operation. Vue role is similar to the watch.
Data listener childhood program began to support basic library version 2.6.1.
1. monitor changes in the sub-data fields:
Key : is the need to be monitored data value : is the data after the change will trigger event function
The left side can monitor a single data listener may be a plurality of data, while monitoring a plurality of data, between each field separated by commas, as long as a field changes, will trigger event function corresponding to the value.
2. Use the wildcard ** monitor changes in all the sub-data fields
The life cycle of the component
1. The main components of the life cycle:
组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的是今典遇到一些特殊的框架事件时被自动触发。
其中，最重要的生命周期是 created, attached, detached ，包含一个组件实例生命流程的最主要时间点。
created：组件实例刚刚被创建好时被触发。此时还不能调用setData。一般这个生命周期只应该用于给组件this添加一些自定义属性字段。
attached：在组件完全初始化完毕，进入页面节点数后，attached生命周期被触发。绝大多数初始化工作都可以在这个时机进行。
detached：在组件离开页面节点数后被触发。退出一个页面时，如果组件还在页面节点树中，则 detached 会被触发。
2.组件可用的全部生命周期函数
3.定义生命周期函数
生命周期方法可以直接定义在 Component 构造器的第一级参数中。
自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。
4.组件的生命周期：
有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称 为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。其中可用的生命周期包括：
例：
Component({
pageLifetimes: {
show() { // 页面被展示
},
hide() { // 页面被隐藏
},
resize(size) { // 页面尺寸变化
}
}
})
6.组件插槽
1.默认插槽
在组件的 wxml 中可以包含 slot 节点，用于承载组件使用者提供的 wxml 结构。
默认情况下，一个组件的 wxml 中只能有一个slot。需要使用多 slot 时，可以在组件 js 中声明启用。
小程序中目前只有默认插槽和多个插槽，暂不支持作用域插槽。
例：
<!-- 组件模板 --> <view class="wrapper"> <view>这里是组件的内部节点</view> <slot></slot> </view>
<!-- 引用组件的页面模板 --> <view> <component-tag-name> <!-- 这部分内容将被放置在组件 <slot> 的位置上 --> <view>这里是插入到组件slot中的内容</view> </component-tag-name> </view>
2.启用多个插槽
在组件中，需要使用多个slot时，可以在组件js中声明启用：
Component({
options: { multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
properties: { /* ... */ },
methods: { /* ... */ }
})
3.定义多个插槽
可以在组件的 wxml 中使用多个 slot 标签，以不同的 name 来区分不同的插槽。
<!-- 组件模板 --> <view class="wrapper"> <slot name="before"></slot> <view>这里是组件的内部细节</view> <slot name="after"></slot> </view>
4.使用多个插槽
使用时，用 slot 属性来将节点插入到不同的 slot 中。
<!-- 引用组件的页面模板 -->
<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>
7. 组件中的通信
1.组件之间的三种基本通信方式：
① WXML 数据绑定：用于父组件向子组件的指定属性传递数据，仅能设置 JSON 兼容数据（自基础库版本 2.0.9 开始，还 可以在数据中包含函数）。
② 事件：用于子组件向父组件传递数据，可以传递任意数据。
③ 如果以上两种方式不足以满足需要，父组件还可以通过 this.selectComponent 方法获取子组件实例对象，这样就可以 直接访问组件的任意数据和方法。
2. this.selectComponent(string)
在小程序的组件中，调用 this.selectComponent(string)，可以返回指定组件的实例对象。
<!-- wxml -->
<component-a class="customA" id= "cA" ></component-a>
<!--父组件的 .js 文件中，可以调用 selectComponent 函数并指定 id 或 class 选择器，获取子组件对象-->
Page({
onLoad(){
// 切记下面参数不能传递标签选择器（component-a），不然返回的是 null
var component = this.selectComponent('.customA'); // 也可以传递 id 选择器 #cA
console.log(component);
}
})
3.通过事件监听实现子向父传值
事件系统是组件间通信的主要方式之一。自定义组件可以触发任意的事件，引用组件的页面可以监听这些事件。
通过事件监听实现子组件向父组件传值的步骤：
① 在父组件的 js 中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件
② 在父组件的 wxml 中，通过自定义事件的形式，将步骤一中定义的函数引用，传递给子组件
③ 在子组件的 js 中，通过调用 this.triggerEvent('自定义事件名称', { /* 参数对象 */ }) ，将数据发送到父组件
④ 在父组件的 js 中，通过 e.detail 获取到子组件传递过来的数据