• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

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

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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)//路西德
  },

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
怎么掌握微信小程序的取值、传值、数据存储发布时间:2022-07-18
下一篇:
微信小程序——template详细使用发布时间:2022-07-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap