标签：周期函数 程序 son test num 组件 data 页面
一、生命周期函数
二、组件
小程序中比如出现多个页面的tab选项卡效果、轮博图效果或者星星评分等，我们一般不是每个页面都实现这个功能，一般是把重复的功能或者模块封装成组件，哪个页面使用就导入即可。
1.创建组件
在项目的根目录下面新建components文件夹（和pages目录平级），里面再新建每个组件。
2.全局引用组件
在app.json中定义如下：
{
"pages":[
。。。。
],
"usingComponents": {
"my-test":"/components/test1/test1"
},
。。。
}
然后在每个页面中都可以通过如下方式使用
<my-test></my-test>3.局部引用组件
在单独一个页面的json文件中如下设置
{
"usingComponents": {
"my-test":"/components/test1/test1"
}
}
在页面中使用如下：
<my-test></my-test>4.组件和页面的区别
- 虽然组件和页面都是由4个文件组件，但是组件的json文件中有如下属性：
{
"component": true
}
- 组件初始化的是Component函数，页面初始化的是Page函数
Page({})
Component({})
- 组件的事件处理函数需要放在methods中，页面的事件处理函数直接放在Page()中
Component({
data: {
},
methods: {
事件函数名:function(){}
}
})
Page({
事件函数名:function(){}
})5.样式处理
- app.wxss中的样式设置只影响页面，不影响组件
比如app.wxss中定义样式如下：
.red{
color:red;
}
页面search.wxml中如果这样写字体颜色是红色的，组件不受影响
<view class="red">测试文字</view>
注意
注意上面的设置只针对类选择器有用，如果你在app.wxss中使用标签选择器设置的样式，组件和页面都会起作用，为了避免样式冲突，建议有组件的页面在app.wxss中使用类选择器定义样式
6.组件属性和方法设置
(1)data
组件中的data和页面一样，也是自己定义变量，页面视图通过{{}}渲染。
组件.js文件中定义如下
Component({
data: {
num:10
}
})
组件.wxml中使用如下：
{{num}}(2)事件
组件.wxml中定义结构如下：
<button bindtap="addNum">点击+1</button>
<view>{{num}}</view>
组件.js中定义如下：
// components/test1/test1.js
Component({
data: {
num:10
},
methods: {
addNum:function(){
this.setData({
num:this.data.num+1
})
}
}
})
所以我们发现和页面中使用是一样的
(3)properties
properties是接受页面传递给组件的内容，格式如下：
页面传递如下：
<my-test info="tom"></my-test>
组件test.js中设置如下：
Component({
properties: {
info:{
type:String,
value:'默认值'
}
}
})
此时如果传递成功，就会显示tom，如果传递不成功就显示默认值是字符串"默认值"
（4）组件中使用监听器
子组件的wxml中添加内容：
<view>{{num1}}+{{num2}}={{sum}}</view>
<button bindtap="addNum1">点击num1+1</button>
<button bindtap="addNum2">点击num2+1</button>
子组件的js中添加事件和监听器
Component({
data: {
num1:0,
num2:0,
sum:0
},
methods: {
addNum1:function(){
this.setData({
num1:this.data.num1+1
})
},
addNum2:function(){
this.setData({
num2:this.data.num2+1
})
}
},
observers:{
"num1,num2":function(newNum1,newNum2){
this.setData({
sum:newNum1+newNum2
})
}
}
})
此时点击两个按钮的时候，数字1和数字的值会发生变化，总和也会发生变化，如果不添加监听器，和不会随着变化。
7.父子组件传值
(1)父传子
- 项目根目录新建components文件夹，里面新建子组件son
- 新建页面test，配置test.json如下：
{
"usingComponents": {
"my-son":"/components/son/son"
}
}
- test.wxml使用组件并通过属性传值
<my-son num="{{10}}"></my-son>
- 子组件son.js的properties中配置如下：
Component({
properties: {
num:Number
}
。。。
}
- 子组件通过{{}}模板语法渲染接收的num变量
<text>{{num}}</text>
(2)子传父
- 子组件test.wxml中绑定传递事件
<button bindtap="click">子组件给父组件传值</button>
- 子组件的事件click方法中传递数据 注意triggerEvent中的第一个参数是传递的事件名，第二个参数是传递的值，可以是变量。
// components/son/son.js
Component({
data: {
},
methods: {
click:function(){
this.triggerEvent('handle',{value:111})
}
}
})
- 页面中接收数据 页面test.wxml中处理如下：
<my-son bind:handle="getContent"></my-son>
页面test.js中定义如下：
Page({
data: {
。。。
},
getContent:function(event){
console.log(event.detail.value)
},
。。。
}(3)获取组件实例对象
- 页面test.wxml中如下定义
<my-son class="son-box"></my-son>
<button bindtap="getChild">获取子组件实例</button>
- 页面test.js中处理getChild方法
Page({
data: {
。。。
},
getChild:function(){
let son= this.selectComponent(".son-box");
son.setData({
number:son.data.number+1
})
},
。。。
})
- 子组件son.js中定义
Component({
properties: {
。。。
},
data: {
number:0
},
。。。
})
- 子组件son.wxml中渲染如下：
<text>{{number}}</text>
此时点击页面中的按钮，子组件中的数据会发生变化。
8.behaviors
behaviors主要是实现多个组件之间的数据共享。
(1)使用步骤
- 项目根目录创建behaviors文件夹，新建一个文件，比如命名share.js
module.exports=Behavior({
properties:{},
data:{
num:0
},
methods:{
addNum:function(){
this.setData({
num:this.data.num+1
})
}
}
})
某个子组件中引入behaviors文件并使用里面的数据和方法
子组件展示内容和使用方法
-
页面中加载上面的子组件 因为我们的组件时无法直接查看的，只有在每个页面中才能看到，所以我们随便打开一个页面，用组件展示即可。
此时我们在页面中随意点击按钮等，就可以让标签中的内容发生变化，本质上是页面加载组件，组件并没有自己定义数据，是借用了behaviors文件中的共享数据和方法
标签：周期函数,程序,son,test,num,组件,data,页面 来源： https://blog.csdn.net/sjs1766349405/article/details/122615694
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。