微信小程序 component组件的使用 以及 传值

1、创建component组件

 

 

2、component.js 中的说明

Component({
  /**
   * 组件的属性列表(对外属性)，属性设置中可包含三个字段,type 表示属性类型、 value 表示属性初始值、 observer 表示属性值被更改时的响应函数
   */
  properties: {

  },
  /**
   * 组件的初始数据(内部数据)，和 properties 一同用于组件的模版渲染
   */
  data: {

  },
  /**
   * 组件的方法列表，包括事件响应函数和任意的自定义方法
   */
  methods: {

  },

  created: function () {
    // 组件生命周期函数，在组件实例进入页面节点树时执行，注意此时不能调用setData（节点树还未导入, 无法使用setData）
    console.log('Component-1 >> created');
  },
  attached: function () {
    // 组件生命周期函数，在组件实例进入页面节点树时执行。可以使用setData来初始化数据，但无法操作节点
    console.log('Component-1 >> attached');
  },
  ready: function () {
    // 在组件布局完成后执行，可以获取到节点信息也可以操作节点
    console.log('Component-1 >> ready');
  },
  moved: function () {
    // 在组件实例被移动到节点树另一个位置时执行
    console.log('Component-1 >> moved');
  },
  detached: function () {
    // 在组件实例被从页面节点树移除时执行
    console.log('Component-1 >> detached');
  },
  lifetimes: {
    // 组件生命周期声明对象，将组件的生命周期收归到该字段进行声明，
    //原有声明方式仍旧有效，如同时存在两种声明方式，则lifetimes字段内声明方式优先级最高
    created: function () {
      console.log('Component-1 lifetimes >> created');
    },
    attached: function () {
      console.log('Component-1 lifetimes >> attached');
    },
    ready: function () {
      console.log('Component-1 lifetimes >> ready');
    },
    moved: function () {
      console.log('Component-1 lifetimes >> moved');
    },
    detached: function () {
      console.log('Component-1 lifetimes >> detached');
    }
  },
  pageLifetimes: {
    // 组件所在页面的生命周期声明对象，目前仅支持页面的show和hide两个生命周期
    show: function () {
      console.log('Component-1 pageLifetimes >> Show');
    },
    hide: function () {
      console.log('Component-1 pageLifetimes >> Hide');
    }
  }
})

 

3、页面中引入组件，在需要引入组件的页面json文件中引入组件

"usingComponents": {
    "popup":"../components/popup/popup"
  },

 

4、页面  --传值-->  组件

      给 页面wxml中的 "组件标签" 添加 键值对 , 键为 : 传过去的数据 名称 , 值为 : 传过去的数据

<popup fromFather="'我是来自页面的数据'"></popup>

      在组件 js中的 properties方法中 添加 对象 , 对象名为 : 父页面传来的数据名称 , 对象type为 : 数据 的 数据类型

properties: {
    fromFather: {
      type: String,
      value: ""
    },
  },

     组件的 wxml 中，之间展示数据名即可

<text>{{fromFather}}</text>

 

5、组件  --传值-->  页面

     子组件 在事件中 , 使用 this.triggerEvent ( '参数一' , { 参数二 } ) 传值给页面.
     参数一为 : 传过去的方法 名称 , 参数二为 : 传过去的数据 ( 以键值对的形式 )

<button bindtap="editSonData">点击传数据给页面</button>

methods: {
    editSonData(){
      this.triggerEvent ( 'fromSon' , {name:'路西德'} )
    }
  },

      在 父页面wxml中的 "组件标签" 添加 bind事件 ( bind + 子组件传来的方法名称="方法名" ) ,

<popup bind:fromSon="editData"></popup>

      再在 js 文件中 添加事件的方法 , e . detail 能获取到 子组件传来的数据

 

editData(e){
    console.log(e.detail.name)//路西德
  },