在根目录下新建components文件夹,在微信开发者工具软件中,在components目录下新建header文件夹,选择header,右键新建component,自动新建自定义组件。
// components/header/header.js
Component({
/**
* 组件的属性列表
*/
properties: {
},
/**
* 组件的初始数据
*/
data: {
title: '我是头部组件'
},
/**
* 组件的方法列表
*/
methods: {
}
})
<!--components/header/header.wxml-->
<text>components/header/header.wxml</text>
<view class="header" hover-class="none" hover-stop-propagation="false">
{{title}}
</view>
在新闻组件中引入我们的自定义组件header
{
"navigationBarTitleText": "新闻页面",
"usingComponents": {
"br": "../../components/br/br",
"header": "../../components/header/header"
}
}
<!--pages/news/news.wxml-->
<text>pages/news/news.wxml</text>
<view>
新闻
</view>
<text>你好</text>
<br />
<br />
<br />
<header></header>
<text>组件</text>
===============================================================================================
父给子绑定属性
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.wxml-->
<header title='{{title}}'></header>
{{title}}
给子组件绑定属性
// 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"
}
}
改变子组件的值
<view class='header'>
{{title}}--{{msg}}
<button bindtap='run' size='mini'>按钮</button>
</view>
// 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) {
}
})
<!--pages/news/news.wxml-->
<header title='{{title}}'></header>
<view>
新闻
</view>
<text>你好</text>
<br />
<text>组件</text>