wx小程式自定義元件與頁面之間引數傳遞
阿新 • • 發佈:2018-12-01
在開發中,很多頁面中會使用相同的元件,這時可以將具有相同資訊的部分封裝成一個元件,方便開發中呼叫。在呼叫中可能會涉及到資料的傳遞問題,例如頁面與元件,元件與元件直接的資料傳遞。
首先看看頁面與元件直接的資料傳遞。
1. 元件需要獲取頁面傳遞資料, 可以使用元件的屬性來傳遞值
2. 頁面需要獲取元件中修改的資料, 可以使用元件中的事件觸發頁面中定義的事件來獲取
第一、元件獲取頁面中資料
先建立一個自定義元件test-component
<!--components/test-component/test-component.wxml--> <view> <input class='new-name' placeholder='請輸入名字' bindinput="bindInputFunc" value='{{inputValue}}'></input> <button class='btn' size='mini' bind:tap='search'>搜尋</button> <view>搜尋記錄:</view> <block wx:for='{{records}}' wx:for-index="index" wx:for-item="record"> <view class='record'>{{record}}</view> </block> </view>
第一、在元件test-component.js中定義一個屬性
// components/test-component/test-component.js Component({ /** * 元件的屬性列表 */ properties: { namesData: { type:Array, value:[], observer: function(newVal, oldVal, changedPath) { // 屬性被改變時執行的函式(可選),也可以寫成在methods段中定義的方法名字串, 如:'_propertyChange' // 通常 newVal 就是新設定的資料, oldVal 是舊資料 console.log(newVal); console.log(oldVal); this.setData({records:newVal}) } } }, /** * 元件的初始資料 */ data: { inputValue:'', records: [] }, /** * 元件的方法列表 */ methods: { //輸入框輸入事件 bindInputFunc: function (e) { this.setData({ inputValue: e.detail.value }) }, /** * 元件搜尋按鈕事件 */ search: function() { let records = [...this.data.records]; records.push(this.data.inputValue); this.setData({ records, inputValue: '' }) this.triggerEvent("search", { records}); /* var myEventDetail = {} // detail物件,提供給事件監聽函式 var myEventOption = {} // 觸發事件的選項 this.triggerEvent('myevent', myEventDetail, myEventOption) 觸發事件的選項包括: 選項名 型別 是否必填 預設值 描述 bubbles Boolean 否 false 事件是否冒泡 composed Boolean 否 false 事件是否可以穿越元件邊界,為false時,事件將只能在引用元件的節點樹上觸發,不進入其他任何元件內部 capturePhase Boolean 否 false 事件是否擁有捕獲階段 */ } } })
第二、建立一個home頁面,引用自定義元件test-component,就是在home.json中增加一個元件的引用
{ "usingComponents":{ "test-component":"/components/test-component/test-component" } }<test-component namesData='{{names}}' bind:search='homeSearch'></test-component>
// pages/home/home.js Page({ /** * 頁面的初始資料 */ data: { names:['aaaa','bbbb','cccc'] }, /** * 搜尋的點選事件 */ homeSearch: function(e) { console.log(e.detail); // 自定義元件觸發事件時提供的detail物件 } })