小程序学习之旅----自定义组件--父子组件及传值
在根目录下新建components文件夹，在微信开发者工具软件中，在components目录下新建header文件夹，选择header，右键新建component，自动新建自定义组件。
// components/header/header.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
title: '我是头部组件'
},
/**
* 组件的方法列表
*/
methods: {
}
})
components/header/header.wxml
{{title}}
在新闻组件中引入我们的自定义组件header
{
"navigationBarTitleText": "新闻页面",
"usingComponents": {
"br": "../../components/br/br",
"header": "../../components/header/header"
}
}
pages/news/news.wxml
新闻
你好
组件 ===============================================================================================
父给子绑定属性
1.父组件调用子组件的时候给自组件绑定属性
2、在子组件的properties 里面接收父组件传过来的数据
properties: {
myProperty: { // 属性名
type: String, // 类型（必填），目前接受的类型包括：String, Number, Boolean, Object, Array, null（表示任意类型）
value: '', // 属性初始值（可选），如果未指定则会根据类型选择一个
observer: function(newVal, oldVal){} // 属性被改变时执行的函数（可选），也可以写成在methods段中定义的方法名字符串, 如：'_propertyChange'
},
myProperty2: String // 简化的定义方式
}
给子组件绑定属性
// pages/user/user.js
Page({
/**
* 页面的初始数据
*/
data: {
title: '我是用户组件的title'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
}
}){
"navigationBarTitleText": "用户页面",
"usingComponents": {
"br": "../../components/br/br",
"header": "../../components/header/header",
"cart": "../../components/cart/cart"
}
}改变子组件的值
{{title}}--{{msg}}
// components/header/header.js
Component({
/**
* 组件的属性列表
*/
properties: {
// title: String
// 如果没传值，就让显示默认值
title: {
type: "String",
value: "头部"
}
},
/**
* 组件的初始数据,绑定的属性不要与properties里重复
*/
data: {
msg: '获取组件data值'
},
/**
* 组件的方法列表
*/
methods: {
run () {
console.log('run')
console.log(this.data.msg);
// 重新设定msg的值
this.setData({
msg: '改变后的值'
})
}
}
})
// pages/news/news.js
Page({
/**
* 页面的初始数据
*/
data: {
title: '新闻组件title'
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
}
})
新闻
你好
组件