在组件中,可以使用this.setPrivateData和this.getPrivateData来设置和获取组件的私有数据,在组件的html中,可以使用@private别名来绑定私有数据。以下代码是一个多选列表的组件示例:

    1. <div class="list">
    2. <div>{{@private.title}}</div>
    3. <label p-for="@private.list" style="clear: both">
    4. <div class="list-box">
    5. <div class="list-box-inner"></div>
    6. </div>
    7. <div>{{name}}</div>
    8. <input type="checkbox" style="display: none" p-bind="name:{{@private.name}} ^ value:{{value}}">
    9. </label>
    10. </div>
    11. <style>
    12. .list .list-box {
    13. float: left;
    14. width: 14px;
    15. height: 14px;
    16. border: 1px solid blue;
    17. border-radius: 2px;
    18. padding-top: 2px;
    19. padding-left: 1px;
    20. box-sizing: border-box;
    21. margin-top: 4px;
    22. margin-right: 5px;
    23. }
    24. .list .list-box.selected {
    25. background: blue;
    26. }
    27. .list .list-box-inner {
    28. width: 10px;
    29. height: 4px;
    30. transform: rotateZ(-45deg);
    31. border-left: 2px solid white;
    32. border-bottom: 2px solid white;
    33. opacity: 0;
    34. transition: all .3s;
    35. }
    36. .list .list-box.selected .list-box-inner{
    37. opacity: 1;
    38. }
    39. </style>
    40. <script>
    41. this.onLoad = function (context, root, vm) {
    42. this.setPrivateData($(root), context);
    43. $(root).on('change', 'input', function (e) {
    44. var target = e.currentTarget;
    45. $(target).siblings('.list-box').toggleClass('selected');
    46. })
    47. }
    48. </script>