小程序学习之旅----自定义组件--父子组件及传值

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