小程序中，我们有时候需要自己定义一些组件，方便我们使用，下面就讲解一下小程序中component的使用，以及互相调用方法及传递参数。
我们举个例子：在index页面定义一个叫my-button的组件。下面就动手起来吧。
1.创建component，取名为my-button，在index.json文件夹下面引入自定义的组件
1.png
2.在my-button组件中自定义我们的属性。
在这里我们就定义一个属性，button的文字
//在properties里面定义我们要的属性
properties: {
btText: {//btText表示我们属性的名字
value: '默认值',//value表示默认值
type: String //type是我们定义的类型，这里是String字符串类型
}
},
3.在index页面中调用我们的自定义的my-button组件。
<view class="container">
<my-button btText='自定义按钮'/>//my-button就是我们自定义组件的名字-----btText就是我们属性的名字
</view>
4.在index中调用my-button里面的方法。
首先我们在自定义的my-button里面定义一个 方法，如下定义一个showLog方法：
Component({
/**
* 组件的属性列表
*/
properties: {
btText: {
value: '默认值',
type: String
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
//my-button的方法
showLog:function(){
console.log("我是自定义button的log")
}
}
})
然后在index里面我们加一个按钮，点击一个按钮去调用my-button里面的方法，并且我们要给自定义的button加一个id
<!--index.wxml-->
<view class="container">
<button bindtap='hahaTap'>哈哈</button>//加了一个按钮点击后去调用自定义按钮里面的方法
<my-button id='myBtn' btText='自定义按钮' /> //加一个id
</view>
我们在index.js里面获取我们的自定义的button
const app = getApp()
Page({
data: {
},
onLoad: function() {
//通过id获取组件component
this.myButton = this.selectComponent("#myBtn")
},
/**
* 按钮点击事件,去调用自定义组件里面的方法
*/
hahaTap: function() {
//showLog是自定义组件我们定义的方法名
this.myButton.showLog();
}
})
然后我们就可以看见showLog()方法被调用后的log输出了
2.png
5.在my-button中调用index里面的方法。
我们在index.js里面建一个方法
indexFunction:function(){
}
在my-button里面给按钮加一个点击事件，点击后调用index里面的indexFunction方法
methods: {
//my-button的方法
showLog:function(){
console.log("我是自定义button的log")
},
/**
* 自定义按钮的点击事件
*/
clickTap:function(){
}
}
我们给自定义按钮加了个点击事件clickTap方法，点击后触发这个方法去掉用index里面的indexFunction();
下面需要我们在index布局的自定义控件button去加一下我们的bind方法
3.png
然后我们在自定义按钮点击方法中去调用index里面的方法
my-button.js里面的method
/**
* 组件的方法列表
*/
methods: {
//my-button的方法
showLog:function(){
console.log("我是自定义button的log")
},
/**
* 自定义按钮的点击事件
*/
clickTap:function(){
this.triggerEvent('indexFunction')
}
}
index.js
const app = getApp()
Page({
data: {
},
onLoad: function() {
//通过id获取组件component
this.myButton = this.selectComponent("#myBtn")
},
/**
* 按钮点击事件,去调用自定义组件里面的方法
*/
hahaTap: function() {
//showLog是自定义组件我们定义的方法名
this.myButton.showLog();
},
indexFunction:function(){
console.log("index里面的方法被调用了")
}
})
4.png
网友评论