在根目录下新建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>
