寰俊灏忕▼搴忚嚜瀹氫箟缁勪欢璇﹁В

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了寰俊灏忕▼搴忚嚜瀹氫箟缁勪欢璇﹁В相关的知识，希望对你有一定的参考价值。

鏍囩锛?a href='http://www.mamicode.com/so/1/att' title='att'>att   鍚嶇О   缁ф壙   private   lob   澶嶆潅   鍏崇郴   鏈夊簭   瀹屾垚   

寰俊灏忕▼搴忚嚜瀹氫箟缁勪欢璇﹁В

鑷畾涔夌粍浠惰兘澶熷府鎴戜滑鏇村ソ鐨勫鐢ㄤ唬鐮佸拰閲嶆瀯绠€鍖栦唬鐮佸鏉傚害銆備竴璧锋潵瀛︿範涓€涓嬪皬绋嬪簭鑷畾涔夌粍浠剁殑鍐呭鍚с€?/p>

浠庡皬绋嬪簭鍩虹搴撶増鏈?1.6.3 寮€濮嬶紝灏忕▼搴忔敮鎸佺畝娲佺殑缁勪欢鍖栫紪绋嬨€傛墍鏈夎嚜瀹氫箟缁勪欢鐩稿叧鐗规€ч兘闇€瑕佸熀纭€搴撶増鏈?1.6.3 鎴栨洿楂樸€?/p>

寮€鍙戣€呭彲浠ュ皢椤甸潰鍐呯殑鍔熻兘妯″潡鎶借薄鎴愯嚜瀹氫箟缁勪欢锛屼互渚垮湪涓嶅悓鐨勯〉闈腑閲嶅浣跨敤锛涗篃鍙互灏嗗鏉傜殑椤甸潰鎷嗗垎鎴愬涓綆鑰﹀悎鐨勬ā鍧楋紝鏈夊姪浜庝唬鐮佺淮鎶ゃ€傝嚜瀹氫箟缁勪欢鍦ㄤ娇鐢ㄦ椂涓庡熀纭€缁勪欢闈炲父鐩镐技

鎬昏

鎶€鏈浘鐗? src=

Component姒傚康

Component鍍忛〉闈竴鏍风敱wxml銆亀xss銆乯s鍜宩son4涓枃浠剁粍鎴愶紝涓旈渶瑕佹妸杩?涓枃浠舵斁鍦ㄥ悓涓€涓洰褰曚腑銆備笌椤甸潰涓嶄竴鏍风殑鏄紝Component涓殑鏋勯€犲嚱鏁帮紙涔熷彲浠ョО鏋勯€犲櫒锛夋槸Component({})锛岃€岄〉闈腑鐨勬瀯閫犲嚱鏁版槸Page({})銆傝缂栧啓涓€涓嚜瀹氫箟缁勪欢锛岄鍏堥渶瑕佸湪 JSON 鏂囦欢涓繘琛岃嚜瀹氫箟缁勪欢澹版槑锛堝皢component瀛楁璁句负true鍙繖涓€缁勬枃浠惰涓鸿嚜瀹氫箟缁勪欢锛夛細

{
  "component": true
}

slot

Component鐨剆lot锛坰lot鎰忔€濇槸鎻掓Ы锛夛紝涓昏鏄浣犲湪澶栭儴鐨剋xml鍙互鑷敱鐨勫湪浣犵殑Component鐨剋xml閲屾彃鍏ユā鍧椼€傞粯璁ゆ儏鍐典笅锛屼竴涓粍浠剁殑wxml鍙彲鑳芥湁涓€涓猻lot銆傞渶瑕佷娇鐢ㄥ涓椂锛屽彲浠ュ湪缁勪欢js涓０鏄庡惎鐢ㄣ€?/p> 

Component({
  options: {
    multipleSlots: true // 鍦ㄧ粍浠跺畾涔夋椂鐨勯€夐」涓惎鐢ㄥslot鏀寔
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

姝ゆ椂锛屽彲浠ュ湪杩欎釜缁勪欢鐨剋xml涓娇鐢ㄥ涓猻lot锛屼互涓嶅悓鐨?name 鏉ュ尯鍒嗐€?/p> 

<!-- 缁勪欢妯℃澘 -->
<view class="wrapper">
  <slot name="before"></slot>
  <view>杩欓噷鏄粍浠剁殑鍐呴儴缁嗚妭</view>
  <slot name="after"></slot>
</view>

浣跨敤鏃讹紝鐢?slot 灞炴€ф潵灏嗚妭鐐规彃鍏ュ埌涓嶅悓鐨剆lot涓娿€?/p> 

<!-- 寮曠敤缁勪欢鐨勯〉闈㈡ā鏉?-->
<view>
  <component-tag-name>
    <!-- 杩欓儴鍒嗗唴瀹瑰皢琚斁缃湪缁勪欢 <slot name="before"> 鐨勪綅缃笂 -->
    <view slot="before">杩欓噷鏄彃鍏ュ埌缁勪欢slot name="before"涓殑鍐呭</view>
    <!-- 杩欓儴鍒嗗唴瀹瑰皢琚斁缃湪缁勪欢 <slot name="after"> 鐨勪綅缃笂 -->
    <view slot="after">杩欓噷鏄彃鍏ュ埌缁勪欢slot name="after"涓殑鍐呭</view>
  </component-tag-name>
</view>

缁勪欢鏍峰紡缂栧啓娉ㄦ剰浜嬮」

  • 缁勪欢鍜屽紩鐢ㄧ粍浠剁殑椤甸潰涓嶈兘浣跨敤id閫夋嫨鍣紙#a锛夈€佸睘鎬ч€夋嫨鍣紙[a]锛夊拰鏍囩鍚嶉€夋嫨鍣紝璇锋敼鐢╟lass閫夋嫨鍣ㄣ€?/li>
  • 缁勪欢鍜屽紩鐢ㄧ粍浠剁殑椤甸潰涓娇鐢ㄥ悗浠ｉ€夋嫨鍣紙.a .b锛夊湪涓€浜涙瀬绔儏鍐典笅浼氭湁闈為鏈熺殑琛ㄧ幇锛屽閬囷紝璇烽伩鍏嶄娇鐢ㄣ€?/li>
  • 瀛愬厓绱犻€夋嫨鍣紙.a>.b锛夊彧鑳界敤浜?view 缁勪欢涓庡叾瀛愯妭鐐逛箣闂达紝鐢ㄤ簬鍏朵粬缁勪欢鍙兘瀵艰嚧闈為鏈熺殑鎯呭喌銆?/li>
  • 缁ф壙鏍峰紡锛屽 font 銆?color 锛屼細浠庣粍浠跺缁ф壙鍒扮粍浠跺唴銆?/li>
  • 闄ょ户鎵挎牱寮忓锛?app.wxss 涓殑鏍峰紡銆佺粍浠舵墍鍦ㄩ〉闈㈢殑鐨勬牱寮忓鑷畾涔夌粍浠舵棤鏁堛€?/li> 
#a { } /* 鍦ㄧ粍浠朵腑涓嶈兘浣跨敤 */
[a] { } /* 鍦ㄧ粍浠朵腑涓嶈兘浣跨敤 */
button { } /* 鍦ㄧ粍浠朵腑涓嶈兘浣跨敤 */
.a > .b { } /* 闄ら潪 .a 鏄?view 缁勪欢鑺傜偣锛屽惁鍒欎笉涓€瀹氫細鐢熸晥 */

/* 缁勪欢 custom-component.js */ Component({ externalClasses: [鈥榤y-class鈥榏 }) <!-- 缁勪欢 custom-component.wxml --> <custom-component class="my-class">杩欐鏂囨湰鐨勯鑹茬敱缁勪欢澶栫殑 class 鍐冲畾</custom-component> /* 缁勪欢澶栫殑鏍峰紡瀹氫箟 */ .red-text { color: red; }

<!--components/component/component.wxml--> <view class="inner"> {{innerText}} </view> <slot></slot>

缂栧啓JS鏂囦欢锛岀粍浠剁殑灞炴€у€煎拰鍐呴儴鏁版嵁灏嗚鐢ㄤ簬缁勪欢 wxml 鐨勬覆鏌擄紝鍏朵腑锛屽睘鎬у€兼槸鍙敱缁勪欢澶栭儴浼犲叆鐨?/p> 

// components/component/component.js
Component({
    /**
     * 缁勪欢鐨勫睘鎬у垪琛?     */
    properties: {
        innerText: {
            type: String,
            value: 鈥榟ello world鈥?        },
        myProperties:String
    },

    /**
     * 缁勪欢鐨勫垵濮嬫暟鎹?     */
    data: {

    },

    /**
     * 缁勪欢鐨勬柟娉曞垪琛?     */
    methods: {

    }
})

璁剧疆瀛椾綋鐨勯鑹?/strong>

/* components/component/component.wxss */
.inner{color: red;}

瀹屾垚瀵圭粍浠剁殑鍒濆鍖栵紝鍖呮嫭璁剧疆灞炴€у垪琛紝鍒濆鍖栨暟鎹紝浠ュ強璁剧疆鐩稿叧鐨勬柟娉曘€?/p>

{ "usingComponents": { "component": "/components/component/component" } }

鍦╬age椤甸潰涓嬫坊鍔犲０鏄庤繃鐨勮嚜瀹氫箟缁勪欢锛?/p> 

<component></component>
<view>
  <component>
    <!-- 杩欓儴鍒嗗唴瀹瑰皢琚斁缃湪缁勪欢 <slot> 鐨勪綅缃笂 -->
    <view>杩欓噷鏄彃鍏ュ埌缁勪欢slot涓殑鍐呭</view>
  </component>
</view>

涓婃柟鐨勬槸涓€涓渶绠€鍗曠殑鑷畾涔夌粍浠躲€?/p>

Component鏋勯€犲櫒

浣跨敤component鏋勯€犲櫒锛岃繘琛屾瀯閫犮€?璇ユ瀯閫犲嚱鏁扮敤浜庡畾涔夌粍浠躲€傝皟鐢–omponent鍑芥暟鑳芥寚瀹氱粍浠剁殑鏁版嵁锛屽睘鎬у拰鏂规硶銆傛潵鐪嬬湅杩欎釜瀹屾暣鐨勫垪琛ㄤ唬鐮佸惈涔夛細

Component({

  behaviors: [],

  properties: {
    myProperty: { // 灞炴€у悕
      type: String, // 绫诲瀷锛堝繀濉級锛岀洰鍓嶆帴鍙楃殑绫诲瀷鍖呮嫭锛歋tring, Number, Boolean, Object, Array, null锛堣〃绀轰换鎰忕被鍨嬶級
      value: 鈥樷€? // 灞炴€у垵濮嬪€硷紙鍙€夛級锛屽鏋滄湭鎸囧畾鍒欎細鏍规嵁绫诲瀷閫夋嫨涓€涓?      observer: function (newVal, oldVal) {
          this._propertyChange(newVal, oldVal);
       } // 灞炴€ц鏀瑰彉鏃舵墽琛岀殑鍑芥暟锛堝彲閫夛級锛屼篃鍙互鍐欐垚鍦╩ethods娈典腑瀹氫箟鐨勬柟娉曞悕瀛楃涓? 濡傦細鈥榑propertyChange鈥?      
    },
    myProperty2: String // 绠€鍖栫殑瀹氫箟鏂瑰紡
  },
  data: {
    A: [{
      B: 鈥榠nit data.A[0].B鈥?    }]
  }, // 绉佹湁鏁版嵁锛屽彲鐢ㄤ簬妯＄増娓叉煋

  lifetimes: {
    // 鐢熷懡鍛ㄦ湡鍑芥暟锛屽彲浠ヤ负鍑芥暟锛屾垨涓€涓湪methods娈典腑瀹氫箟鐨勬柟娉曞悕
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  // 鐢熷懡鍛ㄦ湡鍑芥暟锛屽彲浠ヤ负鍑芥暟锛屾垨涓€涓湪methods娈典腑瀹氫箟鐨勬柟娉曞悕
  attached: function () { }, // 姝ゅattached鐨勫０鏄庝細琚玪ifetimes瀛楁涓殑澹版槑瑕嗙洊
  ready: function() { },

  pageLifetimes: {
    // 缁勪欢鎵€鍦ㄩ〉闈㈢殑鐢熷懡鍛ㄦ湡鍑芥暟
    show: function () { },
  },

  methods: {
    onMyButtonTap: function () {
      this.setData({
        // 鏇存柊灞炴€у拰鏁版嵁鐨勬柟娉曚笌鏇存柊椤甸潰鏁版嵁鐨勬柟娉曠被浼?        myProperty: 鈥楾est鈥?      })
    },
    _myPrivateMethod: function () {
      // 鍐呴儴鏂规硶寤鸿浠ヤ笅鍒掔嚎寮€澶?      this.replaceDataOnPath([鈥楢鈥? 0, 鈥楤鈥榏, 鈥榤yPrivateData鈥? // 杩欓噷灏?data.A[0].B 璁句负 鈥榤yPrivateData鈥?      this.applyDataUpdates()
    },
    _propertyChange: function (newVal, oldVal) {
        console.log(newVal);
        console.log(oldVal);
    }
  }

})

缁勪欢涓庢暟鎹€氫俊

缁勪欢闂寸殑閫氫俊鏂规硶鏈変互涓嬪嚑绉嶏細

  • WXML 鏁版嵁缁戝畾锛氱敤浜庣埗缁勪欢鍚戝瓙缁勪欢鐨勬寚瀹氬睘鎬ц缃暟鎹紝浠呰兘璁剧疆 JSON 鍏煎鏁版嵁锛堣嚜鍩虹搴撶増鏈?2.0.9 寮€濮嬶紝杩樺彲浠ュ湪鏁版嵁涓寘鍚嚱鏁帮級銆傚叿浣撳湪 缁勪欢妯℃澘鍜屾牱寮?绔犺妭涓粙缁嶃€?/li>
  • 浜嬩欢锛氱敤浜庡瓙缁勪欢鍚戠埗缁勪欢浼犻€掓暟鎹紝鍙互浼犻€掍换鎰忔暟鎹€?/li>
  • 濡傛灉浠ヤ笂涓ょ鏂瑰紡涓嶈冻浠ユ弧瓒抽渶瑕侊紝鐖剁粍浠惰繕鍙互閫氳繃 this.selectComponent 鏂规硶鑾峰彇瀛愮粍浠跺疄渚嬪璞★紝杩欐牱灏卞彲浠ョ洿鎺ヨ闂粍浠剁殑浠绘剰鏁版嵁鍜屾柟娉曘€?/li>

閫氳繃鍦ㄩ〉闈腑缁欑粍浠跺姞浜嗕竴涓猧d鍊硷紝杩欐牱瀛愭垜浠氨鑳芥煡鍒扮粍浠剁殑鏂规硶浜嗐€?/p> 

<compontent id="modal"></compontent>

/*js*/
var modal = this.setlectComponet(鈥?modal鈥?;

杩欐牱瀛愬氨鑳藉湪澶栭潰璋冪敤缁勪欢閲岄潰鐨勪换鎰忔暟鎹拰鏂规硶浜嗐€?/p>

  • properties锛氫富椤甸潰浼犲叆鏁版嵁鍒扮粍浠讹紝鐩稿綋浜嶸ue)鐨刾rops锛屾槸浼犲叆澶栭儴鏁版嵁鐨勫叆鍙ｃ€?/li>
  • data锛氬垯鐢ㄤ簬缁勪欢鐨勫唴閮ㄦ暟鎹彉鍖栵紝澶栭儴鏁版嵁娌℃硶鍒濆鍖?/li>

鎶€鏈浘鐗? src=

鍦?properties 瀹氫箟娈典腑锛屽睘鎬у悕閲囩敤椹煎嘲鍐欐硶锛坧ropertyName锛夛紱鍦?wxml 涓紝鎸囧畾灞炴€у€兼椂鍒欏搴斾娇鐢ㄨ繛瀛楃鍐欐硶锛坈omponent-tag-name property-name="attr value"锛夛紝搴旂敤浜庢暟鎹粦瀹氭椂閲囩敤椹煎嘲鍐欐硶锛坅ttr="{{propertyName}}"锛?/p>

浼犲叆鐨勬暟鎹紝涓嶇鏄畝鍗曟暟鎹被鍨嬶紝杩樻槸寮曠敤绫诲瀷锛岄兘濡傚悓鍊煎鍒朵竴鏍?/p>

鏂规硶鍑芥暟璋冪敤

methods锛氶渶瑕佸湪缁勪欢涓皟鐢ㄧ殑鏂规硶锛岄兘鍐欏湪杩欎釜瀵硅薄閲岄潰銆傝窡Page涓殑瀵硅薄閲岄潰鐨勬柟娉曞悓绾с€?/p>

鐢熷懡鍛ㄦ湡锛氬彲鍗曠嫭鏌愪釜鐢熷懡鍛ㄦ湡鏀惧湪Components涓嬶紙鏃у紡鐨勫畾涔夋柟寮忥紝鍙互淇濇寔瀵?<2.2.3 鐗堟湰鍩虹搴撶殑鍏煎锛夛紝涔熷彲浠ユ斁鍦╨ifetimes锛屽鏋滀袱涓湴鏂规湁鍚屽悕鐢熷懡鍛ㄦ湡锛屽垯lifetimes閲岄潰鐨勬柟娉曚細瑕嗙洊鍓嶈€呫€?/p>

鎶€鏈浘鐗? src=

Component({
  lifetimes: {
    attached: function() {
      // 鍦ㄧ粍浠跺疄渚嬭繘鍏ラ〉闈㈣妭鐐规爲鏃舵墽琛?    },
    detached: function() {
      // 鍦ㄧ粍浠跺疄渚嬭浠庨〉闈㈣妭鐐规爲绉婚櫎鏃舵墽琛?    },
  },
  // 浠ヤ笅鏄棫寮忕殑瀹氫箟鏂瑰紡锛屽彲浠ヤ繚鎸佸 <2.2.3 鐗堟湰鍩虹搴撶殑鍏煎
  attached: function() {
    // 鍦ㄧ粍浠跺疄渚嬭繘鍏ラ〉闈㈣妭鐐规爲鏃舵墽琛?  },
  detached: function() {
    // 鍦ㄧ粍浠跺疄渚嬭浠庨〉闈㈣妭鐐规爲绉婚櫎鏃舵墽琛?  },
  // ...
})

缁勪欢鎵€鍦ㄧ殑鐢熷懡鍛ㄦ湡

杩樻湁涓€浜涚壒娈婄殑鐢熷懡鍛ㄦ湡锛屽畠浠苟闈炰笌缁勪欢鏈夊緢寮虹殑鍏宠仈锛屼絾鏈夋椂缁勪欢闇€瑕佽幏鐭ワ紝浠ヤ究缁勪欢鍐呴儴澶勭悊銆傝繖鏍风殑鐢熷懡鍛ㄦ湡绉颁负鈥滅粍浠舵墍鍦ㄩ〉闈㈢殑鐢熷懡鍛ㄦ湡鈥濓紝鍦?pageLifetimes 瀹氫箟娈典腑瀹氫箟銆傚叾涓彲鐢ㄧ殑鐢熷懡鍛ㄦ湡鍖呮嫭锛?/p>

鎶€鏈浘鐗? src=

鐢熸垚鐨勭粍浠跺疄渚嬪彲浠ュ湪缁勪欢鐨勬柟娉曘€佺敓鍛藉懆鏈熷嚱鏁板拰灞炴€?observer 涓€氳繃 this 璁块棶銆傜粍浠跺寘鍚竴浜涢€氱敤灞炴€у拰鏂规硶

鎶€鏈浘鐗? src=

鎶€鏈浘鐗? src=

缁勪欢浼犲嚭鏁版嵁鍒颁富椤甸潰

缁勪欢闂翠氦浜掔殑涓昏褰㈠紡鏄嚜瀹氫箟浜嬩欢銆?/p>

缁勪欢閫氳繃 this.triggerEvent() 瑙﹀彂鑷畾涔変簨浠讹紝涓婚〉闈㈠湪缁勪欢涓?bind:myevent="onMyEvent" 鏉ユ帴鏀惰嚜瀹氫箟浜嬩欢銆?/p>

鍏朵腑锛宼his.triggerEvent() 鏂规硶鎺ユ敹鑷畾涔変簨浠跺悕绉板锛岃繕鎺ユ敹涓や釜瀵硅薄锛宔ventDetail 鍜?eventOptions銆?/p> 

<!-- 鍦ㄨ嚜瀹氫箟缁勪欢涓?-->
<button bindtap="onTap">鐐瑰嚮杩欎釜鎸夐挳灏嗚Е鍙戔€渕yevent鈥濅簨浠?lt;/button>

Component({
  properties: {}
  methods: {
    // 瀛愮粍浠惰Е鍙戣嚜瀹氫箟浜嬩欢
    ontap () {
    // 鎵€鏈夎甯﹀埌涓婚〉闈㈢殑鏁版嵁锛岄兘瑁呭湪eventDetail閲岄潰
    var eventDetail = {
            name:鈥榮ssssssss鈥?
            test:[1,2,3]
    }
    // 瑙﹀彂浜嬩欢鐨勯€夐」 bubbles鏄惁鍐掓场锛宑omposed鏄惁鍙┛瓒婄粍浠惰竟鐣岋紝capturePhase 鏄惁鏈夋崟鑾烽樁娈?    var eventOption = {
            composed: true
    }
    this.triggerEvent(鈥榤yevent鈥? eventDetail, eventOption)
    }
  }
})

瑙﹀彂鐨勪簨浠跺寘鎷細

鎶€鏈浘鐗? src=

鐩戝惉浜嬩欢

鑷畾涔夌粍浠跺彲浠ヨЕ鍙戜换鎰忕殑浜嬩欢锛屽紩鐢ㄧ粍浠剁殑椤甸潰鍙互鐩戝惉杩欎簺浜嬩欢銆傜洃鍚嚜瀹氫箟缁勪欢浜嬩欢鐨勬柟娉曚笌鐩戝惉鍩虹缁勪欢浜嬩欢鐨勬柟娉曞畬鍏ㄤ竴鑷达細

鍦≒age浜嬩欢涓洃鍚粍浠朵腑浼犻€掕繃鏉ョ殑鍊笺€?/p> 

Page({
  onMyEvent: function(e){
    e.detail // 鑷畾涔夌粍浠惰Е鍙戜簨浠舵椂鎻愪緵鐨刣etail瀵硅薄
  }
})

behaviors

behaviors 鏄敤浜庣粍浠堕棿浠ｇ爜鍏变韩鐨勭壒鎬э紝绫讳技浜庝竴浜涚紪绋嬭瑷€涓殑鈥渕ixins鈥濇垨鈥渢raits鈥濄€?/p>

姣忎釜 behavior 鍙互鍖呭惈涓€缁勫睘鎬с€佹暟鎹€佺敓鍛藉懆鏈熷嚱鏁板拰鏂规硶锛岀粍浠跺紩鐢ㄥ畠鏃讹紝瀹冪殑灞炴€с€佹暟鎹拰鏂规硶浼氳鍚堝苟鍒扮粍浠朵腑锛岀敓鍛藉懆鏈熷嚱鏁颁篃浼氬湪瀵瑰簲鏃舵満琚皟鐢ㄣ€傛瘡涓粍浠跺彲浠ュ紩鐢ㄥ涓?behavior 銆?behavior 涔熷彲浠ュ紩鐢ㄥ叾浠?behavior 銆?/p> 

// my-behavior.js
module.exports = Behavior({
  behaviors: [],
  properties: {
    myBehaviorProperty: {
      type: String
    }
  },
  data: {
    myBehaviorData: {}
  },
  attached: function(){},
  methods: {
    myBehaviorMethod: function(){}
  }
})

缁勪欢寮曠敤鏃讹紝鍦?behaviors 瀹氫箟娈典腑灏嗗畠浠€愪釜鍒楀嚭鍗冲彲銆?/p> 

// my-component.js
var myBehavior = require(鈥榤y-behavior鈥?
Component({
  behaviors: [myBehavior],
  properties: {
    myProperty: {
      type: String
    }
  },
  data: {
    myData: {}
  },
  attached: function(){},
  methods: {
    myMethod: function(){}
  }
})

瀛楁鐨勮鐩栧拰缁勫悎瑙勫垯

缁勪欢鍜屽畠寮曠敤鐨?behavior 涓彲浠ュ寘鍚悓鍚嶇殑瀛楁锛屽杩欎簺瀛楁鐨勫鐞嗘柟娉曞涓嬶細

濡傛灉鏈夊悓鍚嶇殑灞炴€ф垨鏂规硶锛岀粍浠舵湰韬殑灞炴€ф垨鏂规硶浼氳鐩?behavior 涓殑灞炴€ф垨鏂规硶锛屽鏋滃紩鐢ㄤ簡澶氫釜 behavior 锛屽湪瀹氫箟娈典腑闈犲悗 behavior 涓殑灞炴€ф垨鏂规硶浼氳鐩栭潬鍓嶇殑灞炴€ф垨鏂规硶锛?br> 濡傛灉鏈夊悓鍚嶇殑鏁版嵁瀛楁锛屽鏋滄暟鎹槸瀵硅薄绫诲瀷锛屼細杩涜瀵硅薄鍚堝苟锛屽鏋滄槸闈炲璞＄被鍨嬪垯浼氳繘琛岀浉浜掕鐩栵紱
鐢熷懡鍛ㄦ湡鍑芥暟涓嶄細鐩镐簰瑕嗙洊锛岃€屾槸鍦ㄥ搴旇Е鍙戞椂鏈鸿閫愪釜璋冪敤銆傚鏋滃悓涓€涓?behavior 琚竴涓粍浠跺娆″紩鐢紝瀹冨畾涔夌殑鐢熷懡鍛ㄦ湡鍑芥暟鍙細琚墽琛屼竴娆°€?/p>

鍐呯疆behavior

<custom-ul> <custom-li> item 1 </custom-li> <custom-li> item 2 </custom-li> </custom-ul>

杩欎釜渚嬪瓙涓紝 custom-ul 鍜?custom-li 閮芥槸鑷畾涔夌粍浠讹紝瀹冧滑鏈夌浉浜掗棿鐨勫叧绯伙紝鐩镐簰闂寸殑閫氫俊寰€寰€姣旇緝澶嶆潅銆傛鏃跺湪缁勪欢瀹氫箟鏃跺姞鍏?relations 瀹氫箟娈碉紝鍙互瑙ｅ喅杩欐牱鐨勯棶棰樸€傜ず渚嬶細

// path/to/custom-ul.js
Component({
  relations: {
    鈥?/custom-li鈥? {
      type: 鈥榗hild鈥? // 鍏宠仈鐨勭洰鏍囪妭鐐瑰簲涓哄瓙鑺傜偣
      linked: function(target) {
        // 姣忔鏈塩ustom-li琚彃鍏ユ椂鎵ц锛宼arget鏄鑺傜偣瀹炰緥瀵硅薄锛岃Е鍙戝湪璇ヨ妭鐐筧ttached鐢熷懡鍛ㄦ湡涔嬪悗
      },
      linkChanged: function(target) {
        // 姣忔鏈塩ustom-li琚Щ鍔ㄥ悗鎵ц锛宼arget鏄鑺傜偣瀹炰緥瀵硅薄锛岃Е鍙戝湪璇ヨ妭鐐筸oved鐢熷懡鍛ㄦ湡涔嬪悗
      },
      unlinked: function(target) {
        // 姣忔鏈塩ustom-li琚Щ闄ゆ椂鎵ц锛宼arget鏄鑺傜偣瀹炰緥瀵硅薄锛岃Е鍙戝湪璇ヨ妭鐐筪etached鐢熷懡鍛ㄦ湡涔嬪悗
      }
    }
  },
  methods: {
    _getAllLi: function(){
      // 浣跨敤getRelationNodes鍙互鑾峰緱nodes鏁扮粍锛屽寘鍚墍鏈夊凡鍏宠仈鐨刢ustom-li锛屼笖鏄湁搴忕殑
      var nodes = this.getRelationNodes(鈥榩ath/to/custom-li鈥?
    }
  },
  ready: function(){
    this._getAllLi()
  }
})

// path/to/custom-li.js
Component({
  relations: {
    鈥?/custom-ul鈥? {
      type: 鈥榩arent鈥? // 鍏宠仈鐨勭洰鏍囪妭鐐瑰簲涓虹埗鑺傜偣
      linked: function(target) {
        // 姣忔琚彃鍏ュ埌custom-ul鏃舵墽琛岋紝target鏄痗ustom-ul鑺傜偣瀹炰緥瀵硅薄锛岃Е鍙戝湪attached鐢熷懡鍛ㄦ湡涔嬪悗
      },
      linkChanged: function(target) {
        // 姣忔琚Щ鍔ㄥ悗鎵ц锛宼arget鏄痗ustom-ul鑺傜偣瀹炰緥瀵硅薄锛岃Е鍙戝湪moved鐢熷懡鍛ㄦ湡涔嬪悗
      },
      unlinked: function(target) {
        // 姣忔琚Щ闄ゆ椂鎵ц锛宼arget鏄痗ustom-ul鑺傜偣瀹炰緥瀵硅薄锛岃Е鍙戝湪detached鐢熷懡鍛ㄦ湡涔嬪悗
      }
    }
  }
})

鍒朵綔涓€涓脊绐楃粍浠?/h2>

https://developers.weixin.qq.com/s/M55masmW764P

以上是关于寰俊灏忕▼搴忚嚜瀹氫箟缁勪欢璇﹁В的主要内容，如果未能解决你的问题，请参考以下文章

妯′豢Common DBUtils鐨勫姛鑳藉疄鐜拌嚜瀹氫箟鐨凞BUtils

寰俊灏忕▼搴?璋冨彇涓婁竴椤电殑鏂规硶

寰俊灏忕▼搴忊€滀竴鍔虫案閫糕€濈殑鎺ュ彛灏佽

寰俊灏忕▼搴忓幓鎺塩heckbox鍓嶉潰鐨勬柟妗?鏍峰紡淇敼

Vue甯哥敤鐨刄I缁勪欢-vant锛堣交閲忋€佸彲闈犵殑绉诲姩绔疺ue缁勪欢搴擄級