微信小程序自定义组件封装及父子间组件传值的方法


Posted in Javascript onAugust 28, 2018

首先在我们可以直接写到需要的 page 中,然后再进行抽取组件,自定义组件建议 wxzx-xxx 命名

官网地址:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/

例如,我们封装的组件名为 **wxzx-loadmore

微信小程序自定义组件封装及父子间组件传值的方法

wxzx-loadmore.wxml

<view hidden="{{response.length < 1}}">
  <view class="weui-loadmore" hidden="{{is_loadmore}}">
    <view class="weui-loading"></view>
    <view class="weui-loadmore__tips">正在加载</view>
  </view>
  <view class="weui-loadmore weui-loadmore_line" hidden="{{!is_loadmore}}">
    <text class="weui-loadmore__tips">{{tip}}</text>
  </view>
</view>

这里就是把index.wxml中的需要封装成组件的代码原样copy过来

wxzx-loadmore.js

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    response: {
      type: String,
      value: ''
    },
    is_loadmore: {
      type: Boolean,
      value: false
    },
    tip: {
      type: String,
      value: '我是有底线的'
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
     emit: function(data) {
      // 自定义组件向父组件传值 
      let val = data,
        my_event_detail = {
          val: val
        }
      // myevent自定义名称事件,父组件中使用
      this.triggerEvent('myevent', my_event_detail)
       /*
        在父组件中写上bind:myevent="get_emit",在父组件中就需要调用get_emit事件
       */
    },
  }
})

index.wxml 父组件

<wxzx-loadmore 
    response="{{comment_list}}"
    is_loadmore="{{is_loadmore}}"
    bind:myevent="get_emit"
    ></wxzx-loadmore>
<!-- 这就是在父组件中调用子组件,然后基于子组件传值来在父组件中赋值 -->

index.js 中

// 接受子组件的传值
  get_emit: function (e) {
    this.setData({
      is_show: e.detail.val
    })
  },

index.json 这里需要引入组件,在哪个父页面中引用子组件,就在哪个json文件中引入

{
  "usingComponents": {
    "wxzx-loadmore": "/component/wxzx-loadmore/wxzx-loadmore"
  }
}

父组件向子组件传参

声明:A组件为父组件,B组件为子组件,以下是A组件向B组件传参:

在A组件中引入B组件

在A组件的json中写入:

{
"component": true,
"usingComponents": {
"componentB": "../child2/child2"
}
}

在A组件的wxml中写入:

<view>我是组件A</view>
<view>
<view>子组件内容:</view>
<componentB paramAtoB='我是A向B中传入的参数'/>
</view>

在B组件的js中写入:

Component({

behaviors: [],

properties: {
paramAtoB:String
},
data: {

}, // 私有数据,可用于模版渲染

// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },

methods: {

}

})

即在properties中定义A组件要传过来的参数类型

在B组件的wxml中写入:

<view style='border:2px solid gray;'>
<view style='text-align:center;'>我是组件B</view>
<view>A中传入的参数:{{paramAtoB}}</view>
</view>

总结: A组件向B组件传参,实际上就是在A组件中引入B组件的时候,带上一个属性paramAtoB,并且给其赋值,然后B组件通过这个属性名称paramAtoB,获取其值

子组件向父组件传参

声明:A组件为父组件,B组件为子组件,以下是B组件向A组件传参:

要让子组件给父组件传参,首先得在父组件引入子组件的时候,加个触发事件,如下:

在父组件A中wxml:

<view style='padding:20px;border:2px solid red;'>
<view style='text-align:center;'>我是组件A</view>
<view>
<view>A组件内容:</view>
<view>B组件传入参数:{{paramBtoA}}</view>
<componentB paramAtoB='我是A向B中传入的参数' bind:myevent="onMyEvent"/>
</view>

</view>

myevent就是绑定的触发事件

在父组件A中js:

Component({

behaviors: [],

properties: {

},
data: {

}, // 私有数据,可用于模版渲染

// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },

methods: {
onMyEvent:function(e){
this.setData({
paramBtoA: e.detail.paramBtoA
})
}
}

})

onMyEvent就是当被子组件触发时的函数

在子组件B中wxml:

<view style='border:2px solid gray;'>
<view style='text-align:center;'>我是组件B</view>
<view>A中传入的参数:{{paramAtoB}}</view>
<button bindtap='change'>向A中传入参数</button>
</view>

button按钮点击事件一触发,就可以传入参数进入父组件A中,在子组件B中js:

Component({

behaviors: [],

properties: {
paramAtoB:String
},
data: {

}, // 私有数据,可用于模版渲染

// 生命周期函数,可以为函数,或一个在methods段中定义的方法名
attached: function () { },
moved: function () { },
detached: function () { },

methods: {
change:function(){
this.triggerEvent('myevent', { paramBtoA:123});
}
}

})

this.triggerEvent就是按钮点击之后执行的事件,触发myevent事件,传入参数paramBtoA进入父组件

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 编程引入命名空间的方法
Jun 29 Javascript
一段效率很高的for循环语句使用方法
Aug 13 Javascript
jQuery使用数组编写图片无缝向左滚动
Dec 11 Javascript
jquery索引在使用中的一些困惑
Oct 24 Javascript
JavaScript中的值类型详细介绍
Dec 29 Javascript
js实现温度计时间样式代码分享
Aug 21 Javascript
所见即所得的富文本编辑器bootstrap-wysiwyg使用方法详解
May 27 Javascript
jQuery解决IE6、7、8不能使用 JSON.stringify 函数的问题
May 31 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
浅析JavaScript异步代码优化
Mar 18 Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 Javascript
layui实现文件或图片上传记录
Aug 28 #Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 #Javascript
react native 获取地理位置的方法示例
Aug 28 #Javascript
微信小程序自定义音乐进度条的实例代码
Aug 28 #Javascript
JavaScript模拟实现自由落体效果
Aug 28 #Javascript
vue-cli3脚手架的配置及使用教程
Aug 28 #Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 #Javascript
You might like
使用PHPMYADMIN操作mysql数据库添加新用户和数据库的方法
2010/04/02 PHP
php中10个不同等级压缩优化图片操作示例
2016/11/14 PHP
Sample script that displays all of the users in a given SQL Server DB
2007/06/16 Javascript
js 第二代身份证号码的验证机制代码
2011/05/12 Javascript
js函数调用的方式
2014/05/06 Javascript
js类定义函数时用prototype与不用的区别示例介绍
2014/06/10 Javascript
轻松创建nodejs服务器(4):路由
2014/12/18 NodeJs
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
深入浅析JSONAPI在PHP中的应用
2017/12/24 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
vue 修改 data 数据问题并实时显示操作
2020/09/07 Javascript
python访问sqlserver示例
2014/02/10 Python
Python对象属性自动更新操作示例
2018/06/15 Python
python numpy元素的区间查找方法
2018/11/14 Python
Python之使用adb shell命令启动应用的方法详解
2019/01/07 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
在Python中使用Neo4j的方法
2019/03/14 Python
Python 3.6 -win64环境安装PIL模块的教程
2019/06/20 Python
ipad上运行python的方法步骤
2019/10/12 Python
快速解决Django关闭Debug模式无法加载media图片与static静态文件
2020/04/07 Python
浅谈HTML5 &amp; CSS3的新交互特性
2016/07/19 HTML / CSS
施华洛世奇新加坡官网:SWAROVSKI新加坡
2020/10/06 全球购物
物业经理求职自我评价
2013/09/22 职场文书
机械电子工程毕业生自荐信
2013/11/23 职场文书
函授药学自我鉴定
2014/02/07 职场文书
拆迁委托协议书
2014/09/15 职场文书
2014司机年终工作总结
2014/12/05 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
单位委托函范文
2015/01/29 职场文书
乌镇导游词
2015/02/02 职场文书
皇城相府导游词
2015/02/06 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏