1# JS语法参考<a name="ZH-CN_TOPIC_0000001209412117"></a> 2 3JS文件用来定义HML页面的业务逻辑，支持ECMA规范的JavaScript语言。基于JavaScript语言的动态化能力，可以使应用更加富有表现力，具备更加灵活的设计能力。下面讲述JS文件的编译和运行的支持情况。 4 5## 语法<a name="zh-cn_topic_0000001173164729_s6ca2e99746664509961f65b82d11ab58"></a> 6 7支持ES6语法。 8 9- 模块声明 10 11 使用import方法引入功能模块： 12 13 ``` 14 import router from '@system.router'; 15 ``` 16 17- 代码引用 18 19 使用import方法导入js代码： 20 21 ``` 22 import utils from '../../common/utils.js'; 23 ``` 24 25 26## 对象<a name="zh-cn_topic_0000001173164729_s7493791622a248fbb2e03703149bb3b5"></a> 27 28- 应用对象 29 30 <a name="zh-cn_topic_0000001173164729_tc5261f21b7014f6cbe17d3ef51b9e1a9"></a> 31 <table><thead align="left"><tr id="zh-cn_topic_0000001173164729_r03f71ea1fd1245fd80e907a22a315e99"><th class="cellrowborder" valign="top" width="8.63%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164729_ae816119c3e0143c892512012c7927037"><a name="zh-cn_topic_0000001173164729_ae816119c3e0143c892512012c7927037"></a><a name="zh-cn_topic_0000001173164729_ae816119c3e0143c892512012c7927037"></a>属性</p> 32 </th> 33 <th class="cellrowborder" valign="top" width="9.370000000000001%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164729_ab72e901bb3ef4657b303513b8fa5ec1f"><a name="zh-cn_topic_0000001173164729_ab72e901bb3ef4657b303513b8fa5ec1f"></a><a name="zh-cn_topic_0000001173164729_ab72e901bb3ef4657b303513b8fa5ec1f"></a>类型</p> 34 </th> 35 <th class="cellrowborder" valign="top" width="82%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164729_ae95f3df496fc41939ac6c1cf74aef9d8"><a name="zh-cn_topic_0000001173164729_ae95f3df496fc41939ac6c1cf74aef9d8"></a><a name="zh-cn_topic_0000001173164729_ae95f3df496fc41939ac6c1cf74aef9d8"></a>描述</p> 36 </th> 37 </tr> 38 </thead> 39 <tbody><tr id="zh-cn_topic_0000001173164729_r170881741fb347fa9bc5ac3a33382a9b"><td class="cellrowborder" valign="top" width="8.63%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164729_a9a70780b9fd8468d98a7c107ee67d8d8"><a name="zh-cn_topic_0000001173164729_a9a70780b9fd8468d98a7c107ee67d8d8"></a><a name="zh-cn_topic_0000001173164729_a9a70780b9fd8468d98a7c107ee67d8d8"></a>$def</p> 40 </td> 41 <td class="cellrowborder" valign="top" width="9.370000000000001%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164729_ace202d9f2dd547c8ab8693954af5d616"><a name="zh-cn_topic_0000001173164729_ace202d9f2dd547c8ab8693954af5d616"></a><a name="zh-cn_topic_0000001173164729_ace202d9f2dd547c8ab8693954af5d616"></a>Object</p> 42 </td> 43 <td class="cellrowborder" valign="top" width="82%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164729_a08a4d55b01864b2fa866f6431cd322de"><a name="zh-cn_topic_0000001173164729_a08a4d55b01864b2fa866f6431cd322de"></a><a name="zh-cn_topic_0000001173164729_a08a4d55b01864b2fa866f6431cd322de"></a>使用this.$app.$def获取在app.js中暴露的对象。</p> 44 <div class="note" id="zh-cn_topic_0000001173164729_note23038122918"><a name="zh-cn_topic_0000001173164729_note23038122918"></a><a name="zh-cn_topic_0000001173164729_note23038122918"></a><span class="notetitle"> 说明： </span><div class="notebody"><p id="zh-cn_topic_0000001173164729_p73038121790"><a name="zh-cn_topic_0000001173164729_p73038121790"></a><a name="zh-cn_topic_0000001173164729_p73038121790"></a>应用对象不支持数据绑定，需主动触发UI更新。</p> 45 </div></div> 46 </td> 47 </tr> 48 </tbody> 49 </table> 50 51 示例代码 52 53 ``` 54 // app.js 55 export default { 56 onCreate() { 57 console.info('AceApplication onCreate'); 58 }, 59 onDestroy() { 60 console.info('AceApplication onDestroy'); 61 }, 62 globalData: { 63 appData: 'appData', 64 appVersion: '2.0', 65 }, 66 globalMethod() { 67 console.info('This is a global method!'); 68 this.globalData.appVersion = '3.0'; 69 } 70 }; 71 ``` 72 73 ``` 74 // index.js页面逻辑代码 75 export default { 76 data: { 77 appData: 'localData', 78 appVersion:'1.0', 79 }, 80 onInit() { 81 this.appData = this.$app.$def.globalData.appData; 82 this.appVersion = this.$app.$def.globalData.appVersion; 83 }, 84 invokeGlobalMethod() { 85 this.$app.$def.globalMethod(); 86 }, 87 getAppVersion() { 88 this.appVersion = this.$app.$def.globalData.appVersion; 89 } 90 } 91 ``` 92 93- 页面对象 94 95 <a name="zh-cn_topic_0000001173164729_table8514281151"></a> 96 <table><thead align="left"><tr id="zh-cn_topic_0000001173164729_row2511928359"><th class="cellrowborder" valign="top" width="16.36%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164729_p1951028754"><a name="zh-cn_topic_0000001173164729_p1951028754"></a><a name="zh-cn_topic_0000001173164729_p1951028754"></a>属性</p> 97 </th> 98 <th class="cellrowborder" valign="top" width="18.54%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164729_p1351228252"><a name="zh-cn_topic_0000001173164729_p1351228252"></a><a name="zh-cn_topic_0000001173164729_p1351228252"></a>类型</p> 99 </th> 100 <th class="cellrowborder" valign="top" width="65.10000000000001%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164729_p651112815519"><a name="zh-cn_topic_0000001173164729_p651112815519"></a><a name="zh-cn_topic_0000001173164729_p651112815519"></a>描述</p> 101 </th> 102 </tr> 103 </thead> 104 <tbody><tr id="zh-cn_topic_0000001173164729_row1651228855"><td class="cellrowborder" valign="top" width="16.36%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164729_p115421323762"><a name="zh-cn_topic_0000001173164729_p115421323762"></a><a name="zh-cn_topic_0000001173164729_p115421323762"></a>data</p> 105 </td> 106 <td class="cellrowborder" valign="top" width="18.54%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164729_p05120283516"><a name="zh-cn_topic_0000001173164729_p05120283516"></a><a name="zh-cn_topic_0000001173164729_p05120283516"></a>Object/Function</p> 107 </td> 108 <td class="cellrowborder" valign="top" width="65.10000000000001%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164729_p61056578507"><a name="zh-cn_topic_0000001173164729_p61056578507"></a><a name="zh-cn_topic_0000001173164729_p61056578507"></a>页面的数据模型，类型是对象或者函数，如果类型是函数，返回值必须是对象。属性名不能以$或_开头，不要使用保留字for, if, show, tid。</p> 109 <p id="zh-cn_topic_0000001173164729_p95116281350"><a name="zh-cn_topic_0000001173164729_p95116281350"></a><a name="zh-cn_topic_0000001173164729_p95116281350"></a>data与private和public不能重合使用。</p> 110 </td> 111 </tr> 112 <tr id="zh-cn_topic_0000001173164729_row2991343201512"><td class="cellrowborder" valign="top" width="16.36%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164729_p1873818536545"><a name="zh-cn_topic_0000001173164729_p1873818536545"></a><a name="zh-cn_topic_0000001173164729_p1873818536545"></a>$refs</p> 113 </td> 114 <td class="cellrowborder" valign="top" width="18.54%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164729_p1073815318541"><a name="zh-cn_topic_0000001173164729_p1073815318541"></a><a name="zh-cn_topic_0000001173164729_p1073815318541"></a>Object</p> 115 </td> 116 <td class="cellrowborder" valign="top" width="65.10000000000001%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164729_p7879941512"><a name="zh-cn_topic_0000001173164729_p7879941512"></a><a name="zh-cn_topic_0000001173164729_p7879941512"></a>持有注册过ref 属性的DOM元素或子组件实例的对象。示例见<a href="#zh-cn_topic_0000001173164729_section1560185062215">获取DOM元素</a>。</p> 117 </td> 118 </tr> 119 <tr id="zh-cn_topic_0000001173164729_row340610191094"><td class="cellrowborder" valign="top" width="16.36%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164729_p240712191998"><a name="zh-cn_topic_0000001173164729_p240712191998"></a><a name="zh-cn_topic_0000001173164729_p240712191998"></a>private</p> 120 </td> 121 <td class="cellrowborder" valign="top" width="18.54%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164729_p1840710194916"><a name="zh-cn_topic_0000001173164729_p1840710194916"></a><a name="zh-cn_topic_0000001173164729_p1840710194916"></a>Object</p> 122 </td> 123 <td class="cellrowborder" valign="top" width="65.10000000000001%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164729_p17407161911917"><a name="zh-cn_topic_0000001173164729_p17407161911917"></a><a name="zh-cn_topic_0000001173164729_p17407161911917"></a>页面的数据模型，private下的数据属性只能由当前页面修改。</p> 124 </td> 125 </tr> 126 <tr id="zh-cn_topic_0000001173164729_row594316386514"><td class="cellrowborder" valign="top" width="16.36%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164729_p99441138554"><a name="zh-cn_topic_0000001173164729_p99441138554"></a><a name="zh-cn_topic_0000001173164729_p99441138554"></a>public</p> 127 </td> 128 <td class="cellrowborder" valign="top" width="18.54%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164729_p994419381151"><a name="zh-cn_topic_0000001173164729_p994419381151"></a><a name="zh-cn_topic_0000001173164729_p994419381151"></a>Object</p> 129 </td> 130 <td class="cellrowborder" valign="top" width="65.10000000000001%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164729_p2094418381153"><a name="zh-cn_topic_0000001173164729_p2094418381153"></a><a name="zh-cn_topic_0000001173164729_p2094418381153"></a>页面的数据模型，public下的数据属性的行为与data保持一致。</p> 131 </td> 132 </tr> 133 <tr id="zh-cn_topic_0000001173164729_row638815278598"><td class="cellrowborder" valign="top" width="16.36%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164729_p139903755910"><a name="zh-cn_topic_0000001173164729_p139903755910"></a><a name="zh-cn_topic_0000001173164729_p139903755910"></a>props</p> 134 </td> 135 <td class="cellrowborder" valign="top" width="18.54%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164729_p4258153555911"><a name="zh-cn_topic_0000001173164729_p4258153555911"></a><a name="zh-cn_topic_0000001173164729_p4258153555911"></a>Array/Object</p> 136 </td> 137 <td class="cellrowborder" valign="top" width="65.10000000000001%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164729_p12388227105918"><a name="zh-cn_topic_0000001173164729_p12388227105918"></a><a name="zh-cn_topic_0000001173164729_p12388227105918"></a>props用于组件之间的通信，可以通过<tag xxxx='value'>方式传递给组件；props名称必须用小写，不能以$或_开头，不要使用保留字for, if, show, tid。目前props的数据类型不支持Function。示例见<a href="component/js-components-custom-props.md">自定义组件</a>。</p> 138 </td> 139 </tr> 140 <tr id="zh-cn_topic_0000001173164729_row14421201293417"><td class="cellrowborder" valign="top" width="16.36%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164729_p144221012173416"><a name="zh-cn_topic_0000001173164729_p144221012173416"></a><a name="zh-cn_topic_0000001173164729_p144221012173416"></a>computed</p> 141 </td> 142 <td class="cellrowborder" valign="top" width="18.54%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164729_p164221412163412"><a name="zh-cn_topic_0000001173164729_p164221412163412"></a><a name="zh-cn_topic_0000001173164729_p164221412163412"></a>Object</p> 143 </td> 144 <td class="cellrowborder" valign="top" width="65.10000000000001%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164729_p6422712153413"><a name="zh-cn_topic_0000001173164729_p6422712153413"></a><a name="zh-cn_topic_0000001173164729_p6422712153413"></a>用于在读取或设置进行预先处理，计算属性的结果会被缓存。计算属性名不能以$或_开头，不要使用保留字。示例见<a href="component/js-components-custom-props.md">自定义组件</a>。</p> 145 </td> 146 </tr> 147 </tbody> 148 </table> 149 150 151## 方法<a name="zh-cn_topic_0000001173164729_s4e1ff24ec78e41948502d8977d24e44c"></a> 152 153- 数据方法 154 155 <a name="zh-cn_topic_0000001173164729_td998a97f34c44c86876d2e1aee646bc6"></a> 156 <table><thead align="left"><tr id="zh-cn_topic_0000001173164729_r41906fbf818041e089ab60c9d410de72"><th class="cellrowborder" valign="top" width="11.361136113611362%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164729_a44385457c0224b7aa0af4b8aaa5fec41"><a name="zh-cn_topic_0000001173164729_a44385457c0224b7aa0af4b8aaa5fec41"></a><a name="zh-cn_topic_0000001173164729_a44385457c0224b7aa0af4b8aaa5fec41"></a>方法</p> 157 </th> 158 <th class="cellrowborder" valign="top" width="16.53165316531653%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164729_a21e0645662414f9893af7ff3a6e24e92"><a name="zh-cn_topic_0000001173164729_a21e0645662414f9893af7ff3a6e24e92"></a><a name="zh-cn_topic_0000001173164729_a21e0645662414f9893af7ff3a6e24e92"></a>参数</p> 159 </th> 160 <th class="cellrowborder" valign="top" width="72.10721072107211%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164729_add5a5e57df3a4d47a09a8f3ef2a28088"><a name="zh-cn_topic_0000001173164729_add5a5e57df3a4d47a09a8f3ef2a28088"></a><a name="zh-cn_topic_0000001173164729_add5a5e57df3a4d47a09a8f3ef2a28088"></a>描述</p> 161 </th> 162 </tr> 163 </thead> 164 <tbody><tr id="zh-cn_topic_0000001173164729_rcba2037b58704ed9bef75b912b96eb80"><td class="cellrowborder" valign="top" width="11.361136113611362%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164729_a75bccc07529343469aad71db98e70b1a"><a name="zh-cn_topic_0000001173164729_a75bccc07529343469aad71db98e70b1a"></a><a name="zh-cn_topic_0000001173164729_a75bccc07529343469aad71db98e70b1a"></a>$set</p> 165 </td> 166 <td class="cellrowborder" valign="top" width="16.53165316531653%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164729_a53419b7e4fde4993b3ab35ad3312c4da"><a name="zh-cn_topic_0000001173164729_a53419b7e4fde4993b3ab35ad3312c4da"></a><a name="zh-cn_topic_0000001173164729_a53419b7e4fde4993b3ab35ad3312c4da"></a>key: string, value: any</p> 167 </td> 168 <td class="cellrowborder" valign="top" width="72.10721072107211%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164729_p84781851442"><a name="zh-cn_topic_0000001173164729_p84781851442"></a><a name="zh-cn_topic_0000001173164729_p84781851442"></a>添加新的数据属性或者修改已有数据属性。</p> 169 <p id="zh-cn_topic_0000001173164729_ae55e2b1d9401454c8555cbb419068829"><a name="zh-cn_topic_0000001173164729_ae55e2b1d9401454c8555cbb419068829"></a><a name="zh-cn_topic_0000001173164729_ae55e2b1d9401454c8555cbb419068829"></a>用法：</p> 170 <p id="zh-cn_topic_0000001173164729_a266dfd3b1b384811b4e7d9a39350e3bc"><a name="zh-cn_topic_0000001173164729_a266dfd3b1b384811b4e7d9a39350e3bc"></a><a name="zh-cn_topic_0000001173164729_a266dfd3b1b384811b4e7d9a39350e3bc"></a>this.$set('key',value)：添加数据属性。</p> 171 </td> 172 </tr> 173 <tr id="zh-cn_topic_0000001173164729_r189d027189d842a1baf1a5d91a9af901"><td class="cellrowborder" valign="top" width="11.361136113611362%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164729_a4ee9a900fc454f66a628f210f2e50548"><a name="zh-cn_topic_0000001173164729_a4ee9a900fc454f66a628f210f2e50548"></a><a name="zh-cn_topic_0000001173164729_a4ee9a900fc454f66a628f210f2e50548"></a>$delete</p> 174 </td> 175 <td class="cellrowborder" valign="top" width="16.53165316531653%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164729_a2e9d28b0f19d4cabbcc1b464bbd9993a"><a name="zh-cn_topic_0000001173164729_a2e9d28b0f19d4cabbcc1b464bbd9993a"></a><a name="zh-cn_topic_0000001173164729_a2e9d28b0f19d4cabbcc1b464bbd9993a"></a>key: string</p> 176 </td> 177 <td class="cellrowborder" valign="top" width="72.10721072107211%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164729_p18897453134313"><a name="zh-cn_topic_0000001173164729_p18897453134313"></a><a name="zh-cn_topic_0000001173164729_p18897453134313"></a>删除数据属性。</p> 178 <p id="zh-cn_topic_0000001173164729_a1e9c2271da5e4cd89dcd6b73c1b3b69d"><a name="zh-cn_topic_0000001173164729_a1e9c2271da5e4cd89dcd6b73c1b3b69d"></a><a name="zh-cn_topic_0000001173164729_a1e9c2271da5e4cd89dcd6b73c1b3b69d"></a>用法：</p> 179 <p id="zh-cn_topic_0000001173164729_a628cc2f32b9247b091f5d37ab0a58fdb"><a name="zh-cn_topic_0000001173164729_a628cc2f32b9247b091f5d37ab0a58fdb"></a><a name="zh-cn_topic_0000001173164729_a628cc2f32b9247b091f5d37ab0a58fdb"></a>this.$delete('key')：删除数据属性。</p> 180 </td> 181 </tr> 182 </tbody> 183 </table> 184 185 示例代码 186 187 ``` 188 export default { 189 data: { 190 keyMap: { 191 OS: 'OpenHarmony', 192 Version: '2.0', 193 }, 194 }, 195 getAppVersion() { 196 this.$set('keyMap.Version', '3.0'); 197 console.info("keyMap.Version = " + this.keyMap.Version); // keyMap.Version = 3.0 198 199 this.$delete('keyMap'); 200 console.info("keyMap.Version = " + this.keyMap); // log print: keyMap.Version = undefined 201 } 202 } 203 ``` 204 205- 公共方法 206 207 <a name="zh-cn_topic_0000001173164729_te12ef71dd85347738d3670aaa9934476"></a> 208 <table><thead align="left"><tr id="zh-cn_topic_0000001173164729_r7c071c236183461dbd8e78bce0073401"><th class="cellrowborder" valign="top" width="13.469999999999999%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164729_a4abb4994ac12403f88c36b8b34a739ec"><a name="zh-cn_topic_0000001173164729_a4abb4994ac12403f88c36b8b34a739ec"></a><a name="zh-cn_topic_0000001173164729_a4abb4994ac12403f88c36b8b34a739ec"></a>方法</p> 209 </th> 210 <th class="cellrowborder" valign="top" width="18.91%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164729_aeac2f3bdee564731ace449ab67008c2c"><a name="zh-cn_topic_0000001173164729_aeac2f3bdee564731ace449ab67008c2c"></a><a name="zh-cn_topic_0000001173164729_aeac2f3bdee564731ace449ab67008c2c"></a>参数</p> 211 </th> 212 <th class="cellrowborder" valign="top" width="67.62%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164729_af669c9f192954747ba61f011dcb6b1c7"><a name="zh-cn_topic_0000001173164729_af669c9f192954747ba61f011dcb6b1c7"></a><a name="zh-cn_topic_0000001173164729_af669c9f192954747ba61f011dcb6b1c7"></a>描述</p> 213 </th> 214 </tr> 215 </thead> 216 <tbody><tr id="zh-cn_topic_0000001173164729_r786add9633394d2f8d72020f28465c87"><td class="cellrowborder" valign="top" width="13.469999999999999%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164729_a6cce84705d514809ac0511d69f5605e1"><a name="zh-cn_topic_0000001173164729_a6cce84705d514809ac0511d69f5605e1"></a><a name="zh-cn_topic_0000001173164729_a6cce84705d514809ac0511d69f5605e1"></a>$element</p> 217 </td> 218 <td class="cellrowborder" valign="top" width="18.91%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164729_ad13b3f17bec14af0859875ac75376e14"><a name="zh-cn_topic_0000001173164729_ad13b3f17bec14af0859875ac75376e14"></a><a name="zh-cn_topic_0000001173164729_ad13b3f17bec14af0859875ac75376e14"></a>id: string</p> 219 </td> 220 <td class="cellrowborder" valign="top" width="67.62%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164729_p103681425164412"><a name="zh-cn_topic_0000001173164729_p103681425164412"></a><a name="zh-cn_topic_0000001173164729_p103681425164412"></a>获得指定id的组件对象，如果无指定id，则返回根组件对象。示例见<a href="#zh-cn_topic_0000001173164729_section1560185062215">获取DOM元素</a>。</p> 221 <p id="zh-cn_topic_0000001173164729_a49e65fad6f094d049706c2514e8a47a9"><a name="zh-cn_topic_0000001173164729_a49e65fad6f094d049706c2514e8a47a9"></a><a name="zh-cn_topic_0000001173164729_a49e65fad6f094d049706c2514e8a47a9"></a>用法：</p> 222 <p id="zh-cn_topic_0000001173164729_a7e59962ba3154456be9a71581364ce92"><a name="zh-cn_topic_0000001173164729_a7e59962ba3154456be9a71581364ce92"></a><a name="zh-cn_topic_0000001173164729_a7e59962ba3154456be9a71581364ce92"></a><div id='xxx'></div></p> 223 <a name="zh-cn_topic_0000001173164729_u338f4836774844dcbeba6ee5218a1151"></a><a name="zh-cn_topic_0000001173164729_u338f4836774844dcbeba6ee5218a1151"></a><ul id="zh-cn_topic_0000001173164729_u338f4836774844dcbeba6ee5218a1151"><li>this.$element('xxx')：获得id为xxx的组件对象。</li><li>this.$element()：获得根组件对象。</li></ul> 224 </td> 225 </tr> 226 <tr id="zh-cn_topic_0000001173164729_row1276482485914"><td class="cellrowborder" valign="top" width="13.469999999999999%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164729_p476514248597"><a name="zh-cn_topic_0000001173164729_p476514248597"></a><a name="zh-cn_topic_0000001173164729_p476514248597"></a>$rootElement</p> 227 </td> 228 <td class="cellrowborder" valign="top" width="18.91%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164729_p107653240596"><a name="zh-cn_topic_0000001173164729_p107653240596"></a><a name="zh-cn_topic_0000001173164729_p107653240596"></a>无</p> 229 </td> 230 <td class="cellrowborder" valign="top" width="67.62%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164729_p137655241599"><a name="zh-cn_topic_0000001173164729_p137655241599"></a><a name="zh-cn_topic_0000001173164729_p137655241599"></a>获取根组件对象。</p> 231 <p id="zh-cn_topic_0000001173164729_p0499149904"><a name="zh-cn_topic_0000001173164729_p0499149904"></a><a name="zh-cn_topic_0000001173164729_p0499149904"></a>用法：this.$rootElement().scrollTo({ duration: 500, position: 300 }), 页面在500ms内滚动300px。</p> 232 </td> 233 </tr> 234 <tr id="zh-cn_topic_0000001173164729_re1d5191790fb423282a8c381b317e0e6"><td class="cellrowborder" valign="top" width="13.469999999999999%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164729_a87cad2551d564814a85a0459673a967c"><a name="zh-cn_topic_0000001173164729_a87cad2551d564814a85a0459673a967c"></a><a name="zh-cn_topic_0000001173164729_a87cad2551d564814a85a0459673a967c"></a>$root</p> 235 </td> 236 <td class="cellrowborder" valign="top" width="18.91%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164729_aad1f4153e71544fb8b4e25d08e3787ca"><a name="zh-cn_topic_0000001173164729_aad1f4153e71544fb8b4e25d08e3787ca"></a><a name="zh-cn_topic_0000001173164729_aad1f4153e71544fb8b4e25d08e3787ca"></a>无</p> 237 </td> 238 <td class="cellrowborder" valign="top" width="67.62%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164729_aff829908cf8d49948c1e736e4a88e3ac"><a name="zh-cn_topic_0000001173164729_aff829908cf8d49948c1e736e4a88e3ac"></a><a name="zh-cn_topic_0000001173164729_aff829908cf8d49948c1e736e4a88e3ac"></a>获得顶级ViewModel实例。<a href="#zh-cn_topic_0000001173164729_section13798143717421">获取ViewModel</a>示例。</p> 239 </td> 240 </tr> 241 <tr id="zh-cn_topic_0000001173164729_rd577efbcfc104ac2b5bed88fc9dd0cfb"><td class="cellrowborder" valign="top" width="13.469999999999999%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164729_a680ff354c19f4d67a88b6eb45203b6d4"><a name="zh-cn_topic_0000001173164729_a680ff354c19f4d67a88b6eb45203b6d4"></a><a name="zh-cn_topic_0000001173164729_a680ff354c19f4d67a88b6eb45203b6d4"></a>$parent</p> 242 </td> 243 <td class="cellrowborder" valign="top" width="18.91%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164729_aae2cc49b962347fba8f7dc43a1a6e072"><a name="zh-cn_topic_0000001173164729_aae2cc49b962347fba8f7dc43a1a6e072"></a><a name="zh-cn_topic_0000001173164729_aae2cc49b962347fba8f7dc43a1a6e072"></a>无</p> 244 </td> 245 <td class="cellrowborder" valign="top" width="67.62%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164729_af3075c6896404f13a5c93929aa713125"><a name="zh-cn_topic_0000001173164729_af3075c6896404f13a5c93929aa713125"></a><a name="zh-cn_topic_0000001173164729_af3075c6896404f13a5c93929aa713125"></a>获得父级ViewModel实例。<a href="#zh-cn_topic_0000001173164729_section13798143717421">获取ViewModel</a>示例。</p> 246 </td> 247 </tr> 248 <tr id="zh-cn_topic_0000001173164729_rb96318b2fb9e4e8ea74dfb280e8fb804"><td class="cellrowborder" valign="top" width="13.469999999999999%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164729_a31ac11bf6d6b477cbc1fb446d5207d0d"><a name="zh-cn_topic_0000001173164729_a31ac11bf6d6b477cbc1fb446d5207d0d"></a><a name="zh-cn_topic_0000001173164729_a31ac11bf6d6b477cbc1fb446d5207d0d"></a>$child</p> 249 </td> 250 <td class="cellrowborder" valign="top" width="18.91%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164729_a7ea3339724db43a0b0ba574ac621f83e"><a name="zh-cn_topic_0000001173164729_a7ea3339724db43a0b0ba574ac621f83e"></a><a name="zh-cn_topic_0000001173164729_a7ea3339724db43a0b0ba574ac621f83e"></a>id: string</p> 251 </td> 252 <td class="cellrowborder" valign="top" width="67.62%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164729_p999210407446"><a name="zh-cn_topic_0000001173164729_p999210407446"></a><a name="zh-cn_topic_0000001173164729_p999210407446"></a>获得指定id的子级自定义组件的ViewModel实例。<a href="#zh-cn_topic_0000001173164729_section13798143717421">获取ViewModel</a>示例。</p> 253 <p id="zh-cn_topic_0000001173164729_p112537114516"><a name="zh-cn_topic_0000001173164729_p112537114516"></a><a name="zh-cn_topic_0000001173164729_p112537114516"></a>用法：</p> 254 <p id="zh-cn_topic_0000001173164729_a39f9c0db073641e5bcbcfc824769ae61"><a name="zh-cn_topic_0000001173164729_a39f9c0db073641e5bcbcfc824769ae61"></a><a name="zh-cn_topic_0000001173164729_a39f9c0db073641e5bcbcfc824769ae61"></a>this.$child('xxx') ：获取id为xxx的子级自定义组件的ViewModel实例。</p> 255 </td> 256 </tr> 257 </tbody> 258 </table> 259 260- 事件方法 261 262 <a name="zh-cn_topic_0000001173164729_table106771249184219"></a> 263 <table><thead align="left"><tr id="zh-cn_topic_0000001173164729_row66781249104214"><th class="cellrowborder" valign="top" width="13.28%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164729_p15678249144218"><a name="zh-cn_topic_0000001173164729_p15678249144218"></a><a name="zh-cn_topic_0000001173164729_p15678249144218"></a>方法</p> 264 </th> 265 <th class="cellrowborder" valign="top" width="35.29%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164729_p17678049114213"><a name="zh-cn_topic_0000001173164729_p17678049114213"></a><a name="zh-cn_topic_0000001173164729_p17678049114213"></a>参数</p> 266 </th> 267 <th class="cellrowborder" valign="top" width="51.43%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164729_p26786495424"><a name="zh-cn_topic_0000001173164729_p26786495424"></a><a name="zh-cn_topic_0000001173164729_p26786495424"></a>描述</p> 268 </th> 269 </tr> 270 </thead> 271 <tbody><tr id="zh-cn_topic_0000001173164729_row267864944212"><td class="cellrowborder" valign="top" width="13.28%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164729_p067834919421"><a name="zh-cn_topic_0000001173164729_p067834919421"></a><a name="zh-cn_topic_0000001173164729_p067834919421"></a>$watch</p> 272 </td> 273 <td class="cellrowborder" valign="top" width="35.29%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164729_p11678194920424"><a name="zh-cn_topic_0000001173164729_p11678194920424"></a><a name="zh-cn_topic_0000001173164729_p11678194920424"></a>data: string, callback: string | Function</p> 274 </td> 275 <td class="cellrowborder" valign="top" width="51.43%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164729_p1678104913426"><a name="zh-cn_topic_0000001173164729_p1678104913426"></a><a name="zh-cn_topic_0000001173164729_p1678104913426"></a>观察data中的属性变化，如果属性值改变，触发绑定的事件。示例见<a href="component/js-components-custom-props.md">自定义组件</a>。</p> 276 <p id="zh-cn_topic_0000001173164729_p174621629124617"><a name="zh-cn_topic_0000001173164729_p174621629124617"></a><a name="zh-cn_topic_0000001173164729_p174621629124617"></a>用法：</p> 277 <p id="p89871351241"><a name="p89871351241"></a><a name="p89871351241"></a>用法：</p> 278 <p id="zh-cn_topic_0000001173164729_p1173814312460"><a name="zh-cn_topic_0000001173164729_p1173814312460"></a><a name="zh-cn_topic_0000001173164729_p1173814312460"></a>this.$watch('key', callback)</p> 279 </td> 280 </tr> 281 </tbody> 282 </table> 283 284- 页面方法 285 286 <a name="zh-cn_topic_0000001173164729_table4927155523714"></a> 287 <table><thead align="left"><tr id="zh-cn_topic_0000001173164729_row4927255113714"><th class="cellrowborder" valign="top" width="13.28%" id="mcps1.1.4.1.1"><p id="zh-cn_topic_0000001173164729_p192765520376"><a name="zh-cn_topic_0000001173164729_p192765520376"></a><a name="zh-cn_topic_0000001173164729_p192765520376"></a>方法</p> 288 </th> 289 <th class="cellrowborder" valign="top" width="35.29%" id="mcps1.1.4.1.2"><p id="zh-cn_topic_0000001173164729_p1192715550377"><a name="zh-cn_topic_0000001173164729_p1192715550377"></a><a name="zh-cn_topic_0000001173164729_p1192715550377"></a>参数</p> 290 </th> 291 <th class="cellrowborder" valign="top" width="51.43%" id="mcps1.1.4.1.3"><p id="zh-cn_topic_0000001173164729_p49275555370"><a name="zh-cn_topic_0000001173164729_p49275555370"></a><a name="zh-cn_topic_0000001173164729_p49275555370"></a>描述</p> 292 </th> 293 </tr> 294 </thead> 295 <tbody><tr id="zh-cn_topic_0000001173164729_row1692716552379"><td class="cellrowborder" valign="top" width="13.28%" headers="mcps1.1.4.1.1 "><p id="zh-cn_topic_0000001173164729_p199274556371"><a name="zh-cn_topic_0000001173164729_p199274556371"></a><a name="zh-cn_topic_0000001173164729_p199274556371"></a>scrollTo<sup id="zh-cn_topic_0000001173164729_sup17224503390"><a name="zh-cn_topic_0000001173164729_sup17224503390"></a><a name="zh-cn_topic_0000001173164729_sup17224503390"></a>6+</sup></p> 296 </td> 297 <td class="cellrowborder" valign="top" width="35.29%" headers="mcps1.1.4.1.2 "><p id="zh-cn_topic_0000001173164729_p792745512375"><a name="zh-cn_topic_0000001173164729_p792745512375"></a><a name="zh-cn_topic_0000001173164729_p792745512375"></a>scrollPageParam: <a href="#zh-cn_topic_0000001173164729_table131981833173916">ScrollPageParam</a></p> 298 </td> 299 <td class="cellrowborder" valign="top" width="51.43%" headers="mcps1.1.4.1.3 "><p id="zh-cn_topic_0000001173164729_p1292735517377"><a name="zh-cn_topic_0000001173164729_p1292735517377"></a><a name="zh-cn_topic_0000001173164729_p1292735517377"></a>将页面滚动到目标位置，可以通过ID选择器指定或者滚动距离指定。</p> 300 </td> 301 </tr> 302 </tbody> 303 </table> 304 305 **表 1** ScrollPageParam<sup>6+</sup> 306 307 <a name="zh-cn_topic_0000001173164729_table131981833173916"></a> 308 <table><thead align="left"><tr id="zh-cn_topic_0000001173164729_row31992331399"><th class="cellrowborder" valign="top" width="30.826917308269174%" id="mcps1.2.5.1.1"><p id="zh-cn_topic_0000001173164729_p16199113383917"><a name="zh-cn_topic_0000001173164729_p16199113383917"></a><a name="zh-cn_topic_0000001173164729_p16199113383917"></a>名称</p> 309 </th> 310 <th class="cellrowborder" valign="top" width="25.45745425457454%" id="mcps1.2.5.1.2"><p id="zh-cn_topic_0000001173164729_p519953314398"><a name="zh-cn_topic_0000001173164729_p519953314398"></a><a name="zh-cn_topic_0000001173164729_p519953314398"></a>类型</p> 311 </th> 312 <th class="cellrowborder" valign="top" width="12.88871112888711%" id="mcps1.2.5.1.3"><p id="zh-cn_topic_0000001173164729_p556391215143"><a name="zh-cn_topic_0000001173164729_p556391215143"></a><a name="zh-cn_topic_0000001173164729_p556391215143"></a>默认值</p> 313 </th> 314 <th class="cellrowborder" valign="top" width="30.826917308269174%" id="mcps1.2.5.1.4"><p id="zh-cn_topic_0000001173164729_p19199163393916"><a name="zh-cn_topic_0000001173164729_p19199163393916"></a><a name="zh-cn_topic_0000001173164729_p19199163393916"></a>描述</p> 315 </th> 316 </tr> 317 </thead> 318 <tbody><tr id="zh-cn_topic_0000001173164729_row12199173303914"><td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001173164729_p8199203363916"><a name="zh-cn_topic_0000001173164729_p8199203363916"></a><a name="zh-cn_topic_0000001173164729_p8199203363916"></a>position</p> 319 </td> 320 <td class="cellrowborder" valign="top" width="25.45745425457454%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001173164729_p11991833133916"><a name="zh-cn_topic_0000001173164729_p11991833133916"></a><a name="zh-cn_topic_0000001173164729_p11991833133916"></a>number</p> 321 </td> 322 <td class="cellrowborder" valign="top" width="12.88871112888711%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001173164729_p115641312111410"><a name="zh-cn_topic_0000001173164729_p115641312111410"></a><a name="zh-cn_topic_0000001173164729_p115641312111410"></a>-</p> 323 </td> 324 <td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001173164729_p1319943319395"><a name="zh-cn_topic_0000001173164729_p1319943319395"></a><a name="zh-cn_topic_0000001173164729_p1319943319395"></a>指定滚动位置。</p> 325 </td> 326 </tr> 327 <tr id="zh-cn_topic_0000001173164729_row161991633143919"><td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001173164729_p41991333163919"><a name="zh-cn_topic_0000001173164729_p41991333163919"></a><a name="zh-cn_topic_0000001173164729_p41991333163919"></a>id</p> 328 </td> 329 <td class="cellrowborder" valign="top" width="25.45745425457454%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001173164729_p1619918334392"><a name="zh-cn_topic_0000001173164729_p1619918334392"></a><a name="zh-cn_topic_0000001173164729_p1619918334392"></a>string</p> 330 </td> 331 <td class="cellrowborder" valign="top" width="12.88871112888711%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001173164729_p756451219146"><a name="zh-cn_topic_0000001173164729_p756451219146"></a><a name="zh-cn_topic_0000001173164729_p756451219146"></a>-</p> 332 </td> 333 <td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001173164729_p1419943363915"><a name="zh-cn_topic_0000001173164729_p1419943363915"></a><a name="zh-cn_topic_0000001173164729_p1419943363915"></a>指定需要滚动到的元素id。</p> 334 </td> 335 </tr> 336 <tr id="zh-cn_topic_0000001173164729_row191992033183919"><td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001173164729_p1919993316390"><a name="zh-cn_topic_0000001173164729_p1919993316390"></a><a name="zh-cn_topic_0000001173164729_p1919993316390"></a>duration</p> 337 </td> 338 <td class="cellrowborder" valign="top" width="25.45745425457454%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001173164729_p9199183363916"><a name="zh-cn_topic_0000001173164729_p9199183363916"></a><a name="zh-cn_topic_0000001173164729_p9199183363916"></a>number</p> 339 </td> 340 <td class="cellrowborder" valign="top" width="12.88871112888711%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001173164729_p5564181218144"><a name="zh-cn_topic_0000001173164729_p5564181218144"></a><a name="zh-cn_topic_0000001173164729_p5564181218144"></a>300</p> 341 </td> 342 <td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001173164729_p3199233133920"><a name="zh-cn_topic_0000001173164729_p3199233133920"></a><a name="zh-cn_topic_0000001173164729_p3199233133920"></a>指定滚动时长，单位为毫秒。</p> 343 </td> 344 </tr> 345 <tr id="zh-cn_topic_0000001173164729_row2019933315396"><td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001173164729_p13199733133915"><a name="zh-cn_topic_0000001173164729_p13199733133915"></a><a name="zh-cn_topic_0000001173164729_p13199733133915"></a>timingFunction</p> 346 </td> 347 <td class="cellrowborder" valign="top" width="25.45745425457454%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001173164729_p0199173373919"><a name="zh-cn_topic_0000001173164729_p0199173373919"></a><a name="zh-cn_topic_0000001173164729_p0199173373919"></a>string</p> 348 </td> 349 <td class="cellrowborder" valign="top" width="12.88871112888711%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001173164729_p10564171212141"><a name="zh-cn_topic_0000001173164729_p10564171212141"></a><a name="zh-cn_topic_0000001173164729_p10564171212141"></a>ease</p> 350 </td> 351 <td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001173164729_p1919903313394"><a name="zh-cn_topic_0000001173164729_p1919903313394"></a><a name="zh-cn_topic_0000001173164729_p1919903313394"></a>指定滚动动画曲线，可选值参考</p> 352 <p id="zh-cn_topic_0000001173164729_p158650537712"><a name="zh-cn_topic_0000001173164729_p158650537712"></a><a name="zh-cn_topic_0000001173164729_p158650537712"></a><a href="component/js-components-common-animation.md">animation-timing-function</a>。</p> 353 </td> 354 </tr> 355 <tr id="zh-cn_topic_0000001173164729_row110635616428"><td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.1 "><p id="zh-cn_topic_0000001173164729_p6107856124211"><a name="zh-cn_topic_0000001173164729_p6107856124211"></a><a name="zh-cn_topic_0000001173164729_p6107856124211"></a>complete</p> 356 </td> 357 <td class="cellrowborder" valign="top" width="25.45745425457454%" headers="mcps1.2.5.1.2 "><p id="zh-cn_topic_0000001173164729_p20107195674214"><a name="zh-cn_topic_0000001173164729_p20107195674214"></a><a name="zh-cn_topic_0000001173164729_p20107195674214"></a>() => void</p> 358 </td> 359 <td class="cellrowborder" valign="top" width="12.88871112888711%" headers="mcps1.2.5.1.3 "><p id="zh-cn_topic_0000001173164729_p20564151211419"><a name="zh-cn_topic_0000001173164729_p20564151211419"></a><a name="zh-cn_topic_0000001173164729_p20564151211419"></a>-</p> 360 </td> 361 <td class="cellrowborder" valign="top" width="30.826917308269174%" headers="mcps1.2.5.1.4 "><p id="zh-cn_topic_0000001173164729_p1107155694210"><a name="zh-cn_topic_0000001173164729_p1107155694210"></a><a name="zh-cn_topic_0000001173164729_p1107155694210"></a>指定滚动完成后需要执行的回调函数。</p> 362 </td> 363 </tr> 364 </tbody> 365 </table> 366 367 示例： 368 369 ``` 370 this.$rootElement.scrollTo({position: 0}) 371 this.$rootElement.scrollTo({id: 'id', duration: 200, timingFunction: 'ease-in', complete: ()=>void}) 372 ``` 373 374 375## 获取DOM元素<a name="zh-cn_topic_0000001173164729_section1560185062215"></a> 376 3771. 通过$refs获取DOM元素 378 379 ``` 380 <!-- index.hml --> 381 <div class="container"> 382 <image-animator class="image-player" ref="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator> 383 </div> 384 ``` 385 386 ``` 387 // index.js 388 export default { 389 data: { 390 images: [ 391 { src: '/common/frame1.png' }, 392 { src: '/common/frame2.png' }, 393 { src: '/common/frame3.png' }, 394 ], 395 }, 396 handleClick() { 397 const animator = this.$refs.animator; // 获取ref属性为animator的DOM元素 398 const state = animator.getState(); 399 if (state === 'paused') { 400 animator.resume(); 401 } else if (state === 'stopped') { 402 animator.start(); 403 } else { 404 animator.pause(); 405 } 406 }, 407 }; 408 ``` 409 4102. 通过$element获取DOM元素 411 412 ``` 413 <!-- index.hml --> 414 <div class="container"> 415 <image-animator class="image-player" id="animator" images="{{images}}" duration="1s" onclick="handleClick"></image-animator> 416 </div> 417 ``` 418 419 ``` 420 // index.js 421 export default { 422 data: { 423 images: [ 424 { src: '/common/frame1.png' }, 425 { src: '/common/frame2.png' }, 426 { src: '/common/frame3.png' }, 427 ], 428 }, 429 handleClick() { 430 const animator = this.$element('animator'); // 获取id属性为animator的DOM元素 431 const state = animator.getState(); 432 if (state === 'paused') { 433 animator.resume(); 434 } else if (state === 'stopped') { 435 animator.start(); 436 } else { 437 animator.pause(); 438 } 439 }, 440 }; 441 ``` 442 443 444## 获取ViewModel<a name="zh-cn_topic_0000001173164729_section13798143717421"></a> 445 446根节点所在页面： 447 448``` 449<!-- root.hml --> 450<element name='parentComp' src='../../common/component/parent/parent.hml'></element> 451<div class="container"> 452 <div class="container"> 453 <text>{{text}}</text> 454 <parentComp></parentComp> 455 </div> 456</div> 457``` 458 459``` 460// root.js 461export default { 462 data: { 463 text: 'I am root!', 464 }, 465} 466``` 467 468自定义parent组件： 469 470``` 471<!-- parent.hml --> 472<element name='childComp' src='../child/child.hml'></element> 473<div class="item" onclick="textClicked"> 474 <text class="text-style" onclick="parentClicked">parent component click</text> 475 <text class="text-style" if="{{show}}">hello parent component!</text> 476 <childComp id = "selfDefineChild"></childComp> 477</div> 478``` 479 480``` 481// parent.js 482export default { 483 data: { 484 show: false, 485 text: 'I am parent component!', 486 }, 487 parentClicked () { 488 this.show = !this.show; 489 console.info('parent component get parent text'); 490 console.info(`${this.$parent().text}`); 491 console.info("parent component get child function"); 492 console.info(`${this.$child('selfDefineChild').childClicked()}`); 493 }, 494} 495``` 496 497自定义child组件： 498 499``` 500<!-- child.hml --> 501<div class="item" onclick="textClicked"> 502 <text class="text-style" onclick="childClicked">child component clicked</text> 503 <text class="text-style" if="{{show}}">hello child component</text> 504</div> 505``` 506 507``` 508// child.js 509export default { 510 data: { 511 show: false, 512 text: 'I am child component!', 513 }, 514 childClicked () { 515 this.show = !this.show; 516 console.info('child component get parent text'); 517 console.info('${this.$parent().text}'); 518 console.info('child component get root text'); 519 console.info('${this.$root().text}'); 520 }, 521} 522``` 523 524
