[Mini Program] Basic Use of Componentized Development (2)

Componentized development and use

Component communication usage process

In many cases, the content (data, styles, labels) displayed in the component is not hard-coded in the component, and can be determined by the user .

Pass data to the component :

In most cases, components are only responsible for layout and styling, and the content is determined by the object that uses the component;

Therefore, we often need to pass data to our components from the outside, and let our components display;

How to pass it ?

Use properties property;

Supported types :

String、 Number、 Boolean

Object, Array, null ( represents unrestricted type )

Default value :

The default value can be set by value;

sample code

<!-- 向组件传递参数 -->
<section-info title="我是标题" content="我是内容: 哈哈哈哈" />

Component({
    
    
	// 在组件中接收数据
	properties: {
    
    
		title: {
    
    
			type: String,
			value: "我是默认标题"
		},
		content: {
    
    
			type: String,
			value: "我是默认的内容"
		}
	}
})

Pass styles to components :

Pass styles to components :

Sometimes, we don't want to fix the style inside the component, but the outside can decide the style inside the component.

This time, we can use externalClassesproperties :

1. In the Component object, the class to be introduced is defined by the externalClasses property

Component({
    
    
  // 在组件中接收样式
	externalClasses: ["info"]
})

2. Use the class in the externalClasses attribute in the wxml inside the component

<view class="section">
	<view class="title">{
   
   { title }}</view>
	<!-- 使用info类 -->
	<view class="content info">{
   
   { content }}</view>
</view>

3. Pass in the corresponding class in the page, and set the style for this class

<!-- 向组件传入class: info -->
<section-info info="info" />

.info {
    
    
	font-weight: 700;
}

Components pass events out - custom events

Sometimes an event occurs inside a custom component, and the user of the component needs to be informed ( that is, the event inside the component is monitored externally ). At this time, a custom event can be used

First, listen for clicks inside the component, such as listening for the title inside the component

<view class="section">
  <!-- 组件内部监听title -->
	<view class="title" bindtap="onTitleTap">{
   
   { title }}</view>
	<view class="content">{
   
   { content }}</view>
</view>

Listen for events in the component, and this.triggerEventsend the event out in the corresponding event function

Component({
    
    
	// 组件中的方法需要写在methods中
	methods: {
    
    
		onTitleTap() {
    
    
			// 发送事件, 并传递一个aaa的参数
			this.triggerEvent("titleTap", "aaa")
		} 
	}
})

In the page using the component, receive the event passed by the component and bind the corresponding event handler

<!-- 在页面中监听组件发出的事件 -->
<section-info bind:titleTap="onTitleTap" />

In the event handler function, you can get the parameters passed by the component

Page({
    
    
	onTitleTap(event) {
    
    
		console.log("页面中监听到组件的事件");
		// 打印组件传递出来的参数
		console.log(event.detail);
	}
})

The page directly calls the component method

If we want to call the method of the child component in the parent component, we can call this.selectComponent in the parent component to get the instance object of the child component .

When calling, you need to pass in a matching selector selector, such as: this.selectComponent(".my-component").

• define a method in the component

Component({
    
    
	// 组件中的方法需要写在methods中
	methods: {
    
    
		test() {
    
    
			console.log("组件中的方法");
		}
	}
})

• Need to give the component a class to match selector 4

<!-- 调用组件中的方法(需要给一个class用于匹配) -->
<section-info class="section" />
<!-- 点击按钮调用组件中的方法 -->
<button bindtap="onBtnTap">按钮</button>

• Call this.selectComponentthe method to get the child component instance object

Page({
    
    
	onBtnTap() {
    
    
		// 获取组件实例
		const sectionInfo = this.selectComponent(".section")
		// 调用组件中的方法
		sectionInfo.test()
	}
})

---

Component slot definitions use

slot translates to slot :

There are slots in many places in life, the USB slot of the computer, the power slot in the board.

The purpose of the slot is to make our original equipment more expandable.

For example, we can insert U disk, hard disk, mobile phone, stereo, keyboard, mouse and so on into the USB of computer.

Slots for components :

The slot of the component is also to make the components we encapsulate more expandable.

Allows the user to decide what to display in some content inside the component.

Example: Navigation bar in mobile website.

In mobile development, almost every page has a navigation bar.

We will inevitably encapsulate the navigation bar into a plug-in, such as the nav-bar component.

Once we have this component, we can reuse it in multiple pages.

However, the navigation on each page is different

---

Use of a single slot

In addition to the content and style may be determined by the outside world, the outside world may also want to decide the way of display

For example, we have a component that defines the head and tail, but the content in the middle may be a piece of text, a picture, or a progress bar.

Without knowing what other components the outside world wants to insert, we can reserve slots in the components:

• Reserve a slot in the component's wxml file

<view class="my-slot">
	<view class="header">header</view>
	<view class="content">
		<!-- 预留插槽 -->
		<slot></slot>
	</view>
	<view class="footer">footer</view>
</view>

• Using slots in a page's wxml file

<!-- 插入文本 -->
<my-slot>
	<text>我是插入的文本</text>
</my-slot>

<!-- 插入按钮 -->
<my-slot>
	<button size="mini">插入的按钮</button>
</my-slot>

<!-- 插入表单 -->
<my-slot>
	<input type="text" value="插入的表单" />
</my-slot>

Note: Applet slots do not support default values

---

Use of multiple slots

Sometimes in order to make the component more flexible, we need to define multiple slots :

• Define multiple slots in the component wxml, and multiple slots need nameto be distinguished by attributes

<view class="mul-slot">
	<view class="left">
		<slot name="left"></slot>
	</view>
	<view class="center">
		<slot name="center"></slot>
	</view>
	<view class="right">
		<slot name="right"></slot>
	</view>
</view>

• To use a slot in a page, to use a slot, you need to slotspecify which slot to use through the attribute

<mul-slot>
	<view slot="left">左边</view>
	<text slot="center">中间</text>
	<view slot="right">右边</view>
</mul-slot>

• If you use multiple slots, you must enable the use of multiple slots, the default is not allowed to use multiple slots

Component({
    
    
	options: {
    
    
		// 表示开启多个插槽
		multipleSlots: true
	}
})

---

component life cycle

The life cycle of a component refers to some functions of the component itself, which are automatically triggered at special time points or when encountering some special framework events .

Among them, the most important life cycle is the most important created attached detachedtime point in the life process of a component instance.

Since the applet base library version 2.2.3, the life cycle of the component can also be declared in the lifetimes field (this is the recommended way and has the highest priority) .

Component({
    
    
	// 组件的生命周期 推荐写到lifetimes中
	lifetimes: {
    
    
		created() {
    
    
			console.log("组件被创建");
		},
		attached() {
    
    
			console.log("组件被添加到组件树中");
		},
		detached() {
    
    
			console.log("组件从组件树中被移除");
		}
	}
})

The life cycle	parameter	describe
created	none	Executed when the component instance has just been created
attached	none	Executed when the component instance enters the page node tree
ready	none	Executed after the component is laid out in the view layer
moved	none	Executed when a component instance is moved to another location in the node tree
detached	none	Executed when the component instance is removed from the page node tree
error	Object Error	Executed whenever a component method throws an error

Generally, in the created life cycle, network requests are sent; in the attached life cycle, the DOM is obtained; in the detached life cycle, the operation of recycling components is performed.

Learn about other life cycles

The life cycle of the page where the component is located

There are also special lifecycles that are not strongly associated with components, but sometimes a component needs to know about in order to handle it internally .

Such a life cycle is called "the life cycle of the page where the component is located" and is defined in the pageLifetimesdefinition section.

Among the available lifecycles are :

The life cycle	parameter	describe
show	none	Executed when the page the component is on is displayed
hide	none	Executed when the page where the component is located is hidden
resize	Object Size	Executed when the size of the page where the component is located changes

Component({
    
    
  pageLifetimes: {
    
    
    show: function() {
    
    
      // 组件所在页面被展示
    },
    hide: function() {
    
    
      // 组件所在页面被隐藏
    },
    resize: function(size) {
    
    
      // 组件所在页面尺寸变化
    }
  }
})

Component constructor summary