まず、カスタムコンポーネントを格納するために使用されるページディレクトリのフォルダ内のコンポーネントを作成します。示されているように、ダイアログアドオンのために、私は4つのファイルに分け、同様に、例えば、自己定義されたフォーマットとページのコンポーネントのために、作成しました。
図1
図2
図2に示すように、インデックスページは、ボタンクリックイベントを持っている場合は、ポップアップダイアログをトリガし、そしてあなたは部門をクリックすると、ダイアログを閉じて、部門名やタイトル同期赤くなります。
まず、最初に書かれたスタイルのダイアログコンポーネントは、適切な位置インデックスページで参照します。次のコード、それである(それぞれ:wxml、wxss、JS、JSON)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
|
注意してください、あなたは適切なページでそれを参照してください。最後のステップを忘れないでください:カスタムコンポーネントと下位コンポーネントディレクトリ名を一致するように。私はindex.wxmlで、次の図にそれを使用します
どのようにページを持つ第二に、データ通信コンポーネント?
•首先要知道你点击的是列表中的哪个部门,所有要为列表元素添加一个 groupClick事件 打印出事件对象 e ,我们发现我们要的数据在e.target.dataset.index里
•已经得到数据对象了,下一步就是想办法把它传递给 index页面更新数据。在当前页面想要获取组件中的某一状态,需要使用到this.triggerEvent(' ',{},{}),第一个参数是自定义事件名称,所以还要在组件身上绑定个自定义事件,第二个对象就是你要传递的数据,第三个一般不用(代码参见标黄部分)
•最后就是在页面的index.js中定义这个事件来接收dialog的数据,并打印出 e 找到数据更新数据。(如下代码)
1 2 3 4 5 6 7 8 |
|
三、最后一个小知识
如果想在 index.js逻辑中引用dialog.js 中methods里定义好的方法,需要在index.js 中添加如下代码
1 2 3 |
|
比如:我把show、close 方法定义在了组件中的methods 里,要在index页面中触发某个时间让dialog展示,只需在index.js 中这么写即可
原文链接:https://www.cnblogs.com/jervy/archive/2018/10/09/9761191.html