Import components
-
global component
Configure usingComponents in the app.json file , multiple components are separated by commas, and the last one does not add a comma
-
Components used on a single page
Configure usingComponents in the .json file of the page
"usingComponents": { "myConponent": "./xxx/xxx" }After configuration, the component can be used in the page
<myConponent></myConponent>Note: The component name can be written in small camel case or dash separator. When a custom component is introduced into a json file, the camel case name cannot be automatically converted to - form. Therefore, the component names must be unified when defining, registering, and referencing,
<myConponent></myConponent>and<my-conponent></my-conponent>correspond to different components.
1. Pass data from parent component to child component: WXML data binding
Some custom component properties can be registered in the child component properties , and the parent component can pass values to the custom properties in the properties when calling the child component.
Component({
properties: {
personObj: {
type: Object,//定义传入属性值的类型
value: {
},//定义默认属性值
}
},
data: {
number:1
},
})
If there is data in the parent component:
data: {
person:{
name:"sun",
age:10
}
},
When the parent component calls the child component, it can pass values to the properties in the properties of the child component
<childDemo personObj="{
{person}}"></childDemo>
The received attribute values can be used in subcomponents just like their own attributes
<view>我是子组件内容</view>
<view>{
{personObj.name}}</view>
<view>{
{personObj.age}}</view>
Note: Such data bindings can only pass JSON compatible data.
Second, the child component passes data to the parent component: event binding triggerEvent()
The child component submits an event that can be listened to by the parent component through the this.triggerEvent() method
The page of the parent component can listen to the events of the child component and get data from the child component. Child components also trigger parent component methods in this way.
Subcomponent wxml code
<button bindtap="onTap">点击这个按钮将触发父组件“myevent”事件</button>
Subcomponent js code
onTap: function(){
var myEventDetail = {
valueA: 1,
valueBB: 2
} // detail对象，包含需传递给父组件的数据，提供给事件监听函数，可选参数
var myEventOption = {
} // 触发事件的选项，可选参数。
this.triggerEvent('myevent', myEventDetail, myEventOption)
},
parent component wxml code
<childDemo bind:myevent="myeventListener"></childDemo>
parent component js code
myeventListener: function (recivedEvent) {
console.log(recivedEvent)
console.log(recivedEvent.detail);//{valueA: 1, valueBB: 2}
},
3. Parent component accesses child component data: selectComponent()
The parent component can this.selectComponent('id或class选择器')directly access any data and methods of the child component by obtaining the child component instance object.
If the subcomponent childDemo has the following data and methods
data: {
number:1
},
methods: {
log: function () {
console.log("子组件方法");
}
}
Reference child component in parent component
<childDemo id="childDemo"></childDemo>
Parent component js code:
handleTap: function () {
let childObj = this.selectComponent('#childDemo')//获取子组件实例对象
console.log(childObj.data.number);//访问子组件实例属性
this.selectComponent('#childDemo').log()//访问子组件实例方法
},
Fourth, use to < slot >insert content into subcomponents
A <slot>node to host the child nodes provided when the component is referenced.
Child component template:
<view class="wrapper">
<view>这里是组件的内部节点</view>
<slot></slot>
</view>
parent component template
<view>
<component-tag-name>
<!-- 这部分内容（整个标签）将被放置在组件 <slot> 的位置上 -->
<view>这里是插入到组件 slot 中的内容</view>
</component-tag-name>
</view>