微信小程序定制组件封装及父子间组件价值转移方法

首先，我们可以直接写到需要的页面，然后提取组件。建议将自定义组件命名为wxzx-xxx

官网地址：https://developers . weixin . QQ.com/mini program/dev/framework/custom-component/

例如，我们打包的组件名为**wxzx-loadmore

wxzx-loadmore.wxml

view hidden=' { { response . length 1 } } ' view class=' weui-load more ' hidden=' { { is _ load more } } ' view class=' weui-loading '/view view view class=' weui-load more _ line ' hidden=' {！is _ load more } } ' text class=' weui-load more _ _ tips ' { tip } }/text/view/view这里是复制index.wxml中需要直接打包成组件的代码。

wxzx-loadmore.js

组件({ /** *组件属性列表*/properties : { response : { type : string，value:''})，is _ loadmore 3360 { type : boolean，Value: false}，tip: {type: string，value: '我有一个底线' }，/** *组件的初始数据*/data: {}，/* * *组件的方法列表*/methods 333330triggerevent ('myevent '，my _ event _ detail)/*在父组件中写入bind:myevent='get_emit '，因此需要调用get_emit event */}，}})index.wxml父组件中的父组件

wxzx-loadmore响应=' { { comment _ list } } ' is _ load more=' { { is _ load more } } ' bind : myevent=' get _ emit '/wxzx-load more！-即调用父组件中的子组件，然后根据index.js中子组件传递的值在父组件中赋值

//接受子组件get _ emit : function(e){ this . setdata({ is _ show : e . detail . val })}、index.json的传递值在这里，需要导入组件，其中json文件引用的是哪个父页面中的子组件。

{ '使用组件' : { ' wxzx-load more ' 3360 '/组件/wxzx-load more/wxzx-load more ' } }父组件将参数传递给子组件

声明：组件是父组件，组件是子组件。以下是从组件A传递到组件B的参数：

将b组分引入到组分中

用json编写一个组件：

{'component' : true，'使用组件' : {'component b' : './child2/child2'}}是用组件a的wxml编写的：

视图我是组件A的子组件/view view内容：/viewcomponentbparamatob='我是从A传递到B的参数'/视图是用B组件的js写的：

组件({ behavior :[]，properties : { paramato b : string })，data: {}，//私有数据，可用于模板呈现//生命周期函数，可以是函数。或者在methods部分定义了一个名为attached:function () {}、moved:function () {}、separate d : function(){ }、methods: {}的方法，即在properties中定义了a组件要传递的参数类型。

用b组件的wxml编写：

视图样式='border:2px纯灰色；'视图样式=' text-align : center；'我是从组件B传入的参数/viewpiewa:{ { paramAtoB } }/view/view Summary:当A组件将参数传递给B组件时，实际上，当B组件被引入A组件时，它会取一个属性paramAtoB并为其赋值，然后B组件通过这个属性名paramAtoB获取其值。

子组件将参数传递给父组件

声明：A组件是父组件，B组件是子组件，下面是B组件传递给A组件的参数：

要将参数从子组件传递到父组件，首先在父组件引入子组件时添加一个触发器事件，如下所示：

父组件a中的Wxml:

view style=' padding:20px' border:2px纯红；'视图样式=' text-align : center；'我是组件A/viewpiewa组件内容：/viewpiewb组件传入参数：{ { parambtoa } }/viewpomponentbparamatob='我是从A传入到b的参数' bind : my event=' on my event '/view/viewpymevent是绑定的触发事件

父组件A中的Js:

组件({ behavior :[]，properties: {}，data: {}，//私有数据，可用于模板呈现//生命周期函数，该函数可以是在methods部分定义的名为attached: function () {}的函数或方法。Moved:function () {}，separate d : function(){ }，methods : { on my event 3360 function(e){ this。setdata ({parambtoa :e。细节。我的事件上的parambtoa})}})是子组件被触发时的函数。

子组件b中的Wxml:

视图样式='border:2px纯灰色；'视图样式=' text-align : center；'我是从组件B/视图a传入的参数：{ { parama tob } }/视图按钮bindtap=' change '将参数传入a/按钮/视图按钮。一旦触发了按钮点击事件，就可以将参数传递给父组件a和子组件b中的js:

组件({ behavior :[]，properties : { paramato b : string })，data: {}，//私有数据，可用于模板呈现//生命周期函数，可以是函数。或者是一个名为attached :function () {}，moved :function () {}，disconnected : function(){ }，methods : { change : function(){ this。triggerevent ('myevent '，{parambtoa 3360123。}}})this.triggerEvent是单击按钮后执行的事件，触发myevent事件，并将参数paramBtoA传递给父组件

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。