首先在我們可以直接寫到需要的 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進入父組件
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
