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


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 相关文章推荐
三级下拉菜单的js实现代码
May 23 Javascript
JS的get和set使用示例
Feb 20 Javascript
node.js中的fs.readFileSync方法使用说明
Dec 15 Javascript
JavaScript中的console.assert()函数介绍
Dec 29 Javascript
JavaScript使用cookie记录临时访客信息的方法
Apr 07 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 Javascript
从零开始搭建一个react项目开发
Feb 09 Javascript
vue实现键盘输入支付密码功能
Aug 18 Javascript
vue实现PC端录音功能的实例代码
Jun 05 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
js获取图片的base64编码并压缩
Dec 05 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
风格模板初级不完全修改教程
2006/10/09 PHP
PHP设计模式之工厂模式实例总结
2017/09/01 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
JS保留两位小数 四舍五入函数的小例子
2013/11/20 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
jQuery调用ajax请求的常见方法汇总
2015/03/24 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
使用JavaScript实现弹出层效果的简单实例
2016/05/31 Javascript
ES6中的rest参数与扩展运算符详解
2017/07/18 Javascript
用vue的双向绑定简单实现一个todo-list的示例代码
2017/08/03 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
解决vue中虚拟dom,无法实时更新的问题
2018/09/15 Javascript
JS异步执行结果获取的3种解决方式
2019/02/19 Javascript
细说Vue组件的服务器端渲染的过程
2019/05/30 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
js 数据类型判断的方法
2020/12/03 Javascript
Vue 实现一个简单的鼠标拖拽滚动效果插件
2020/12/10 Vue.js
[01:02]DOTA2辉夜杯决赛日 CDEC.Y对阵VG赛前花絮
2015/12/27 DOTA
[00:49]完美世界DOTA2联赛10月28日开团时刻:随便打
2020/10/29 DOTA
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
解析Python中while true的使用
2015/10/13 Python
Python实现字符串匹配的KMP算法
2019/04/04 Python
python list转置和前后反转的例子
2019/08/26 Python
详解CSS3+JS完美实现放大镜模式
2020/12/03 HTML / CSS
留学推荐信怎么写
2014/01/25 职场文书
集体备课反思
2014/02/12 职场文书
成人继续教育实施方案
2014/03/01 职场文书
服务质量承诺书
2014/03/27 职场文书
2016年春节问候语
2015/11/11 职场文书
个人工作失误的保证书怎么写?
2019/06/21 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python
解析高可用Redis服务架构分析与搭建方案
2021/06/20 Redis
Spring Boot DevTools 全局配置学习指南
2022/03/31 Java/Android