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


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 相关文章推荐
window.name代替cookie的实现代码
Nov 28 Javascript
Jquery:ajax实现翻页无刷新功能代码
Aug 05 Javascript
javascript递归回溯法解八皇后问题
Apr 22 Javascript
JavaScript黑洞数字之运算路线查找算法(递归算法)实例
Jan 28 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
Sep 01 Javascript
js手机号批量滚动抽奖实现代码
Apr 17 Javascript
BootStrap Datepicker 插件修改为默认中文的实现方法
Feb 10 Javascript
原生js实现放大镜特效
Mar 08 Javascript
Vue.js中兄弟组件之间互相传值实例
Jun 01 Javascript
监听angularJs列表数据是否渲染完毕的方法示例
Nov 07 Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 jQuery
JS实现简单贪吃蛇小游戏
Oct 28 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
PHP内置的Math函数效率测试
2014/12/01 PHP
Laravel框架中实现使用阿里云ACE缓存服务
2015/02/10 PHP
php使用Jpgraph绘制3D饼状图的方法
2015/06/10 PHP
php微信分享到朋友圈、QQ、朋友、微博
2019/02/18 PHP
laravel 去掉index.php伪静态的操作方法
2019/10/12 PHP
JS 强制设为首页的代码
2009/01/31 Javascript
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
Javascript 获取链接(url)参数的方法[正则与截取字符串]
2010/02/09 Javascript
Prototype的Class.create函数解析
2011/09/22 Javascript
jQuery中attr()和prop()在修改checked属性时的区别
2014/07/18 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
Jquery ajax 同步阻塞引起的UI线程阻塞问题
2015/11/17 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
JavaScript获取css行间样式,内连样式和外链样式的简单方法
2016/07/18 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
微信公众号-获取用户信息(网页授权获取)实现步骤
2016/10/21 Javascript
微信小程序实现动态设置页面标题的方法【附源码下载】
2017/11/29 Javascript
关于HTML5的data-*自定义属性的总结
2018/05/05 Javascript
VUE-cli3使用 svg-sprite-loader
2018/10/20 Javascript
Vue 框架之键盘事件、健值修饰符、双向数据绑定
2018/11/14 Javascript
如何提升vue.js中大型数据的性能
2019/06/21 Javascript
JavaScript实现简单随机点名器
2019/11/21 Javascript
JS typeof fn === 'function' &amp;&amp; fn()详解
2020/08/22 Javascript
python获取指定网页上所有超链接的方法
2015/04/04 Python
python如何获取服务器硬件信息
2017/05/11 Python
用Eclipse写python程序
2018/02/10 Python
python xlsxwriter创建excel图表的方法
2018/06/11 Python
使用numba对Python运算加速的方法
2018/10/15 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
Python使用gluon/mxnet模块实现的mnist手写数字识别功能完整示例
2019/12/18 Python
面向新手解析python Beautiful Soup基本用法
2020/07/11 Python
美国创意礼品网站:UncommonGoods
2017/02/03 全球购物
德国购买门票网站:ADticket.de
2019/10/31 全球购物
《草虫的村落》教学反思
2014/02/16 职场文书
座谈会主持词
2014/03/20 职场文书
2016先进集体事迹材料范文
2016/02/25 职场文书