加入收藏 | 设为首页 | 会员中心 | 我要投稿 PHP编程网 - 湛江站长网 （https://www.0759zz.com/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 建站 > 正文

快应用的事件监听机制和组件间通信

发布时间：2019-03-02 10:43:20 所属栏目：建站 来源：王波
导读：副标题#e# 说起事件，做前端开发的朋友一定不会陌生。事件，即网页上的一系列行为，可以是浏览器行为，如页面完成了加载，页面关闭；或是用户操作行为，如用户输入操作，用户点击按钮等，这些行为会被JavaScript监测到，并执行相应的逻辑代码。可以说，前端

示例如下：

  1. <script>  
  2.   
  3. // 子组件  
  4.   
  5. export default {  
  6.   
  7. props: [  
  8.   
  9. 'prop1',  
  10.   
  11. 'prop2Object'  
  12.   
  13. ],  
  14.   
  15. data () {  
  16.   
  17. return {  
  18.   
  19. upperProp1: this.prop1  
  20.   
  21. }  
  22.   
  23. },  
  24.   
  25. onInit () {  
  26.   
  27. console.info(`外部传递的数据：`, this.prop1, this.prop2Object)  
  28.   
  29. // 监听数据变化  
  30.   
  31. this.$watch('prop1', 'watchPropsChange')  
  32.   
  33. this.$watch('prop2Object.name', 'watchPropsChange')  
  34.   
  35. },  
  36.   
  37. /**  
  38.   
  39. * 监听数据变化，你可以对数据处理后，设置值到data上  
  40.   
  41. * @param newV  
  42.   
  43. * @param oldV  
  44.   
  45. */  
  46.   
  47. watchPropsChange (newV, oldV) {  
  48.   
  49. console.info(`监听数据变化：`, newV, oldV)  
  50.   
  51. this.upperProp1 = newV && newV.toUpperCase()  
  52.   
  53. }  
  54.   
  55. }  
  56.   
  57. </script>  

解释一下

上面是子组件的代码，我们看到data中定义了upperProp1，同时也看到watchPropsChange方法中，有两个参数，一个是newV,指变化后的属性值，oldV指原先的属性值，将newV赋值给upperProp1，这样在子组件中对数据upperProp1进行改造，就不会改动父组件原先的数据。

父子组件之间的事件传递

当子组件对数据进行改造后，把最终数据交给父组件甚至往上，往往有两种办法

1、父组件传递的数据本身就是对象，子组件直接修改的就是这个对象中的属性；那么父组件同样也就拿到了最终数据

2、子组件在data中保存了一份内部数据，需要交给父组件：子组件通过$dispatch()完成事件触发，父组件通过$on()绑定事件并响应，如：evtType2；

类似于2，子组件在data中保存了一份内部数据，需要交给父组件：子组件通过$emit()触发在节点上绑定的事件来执行父组件的方法，如：evtType3；

示例如下：

  1. <script>  
  2.   
  3. // 子组件  
  4.   
  5. export default {  
  6.   
  7. props: [  
  8.   
  9. 'prop1',  
  10.   
  11. 'prop2Object'  
  12.   
  13. ],  
  14.   
  15. data () {  
  16.   
  17. return {  
  18.   
  19. upperProp1: this.prop1  
  20.   
  21. }  
  22.   
  23. },  
  24.   
  25. onInit () {  
  26.   
  27. console.info(`外部传递的数据：`, this.prop1, this.prop2Object)  
  28.   
  29. // 绑定VM的自定义事件  
  30.   
  31. this.$on('evtType1', this.evtTypeHandler)  
  32.   
  33. // 这里我认为官网的代码示例存在问题，因此注释掉了，此处应该将其移至父组件的onInit方法中。  
  34.   
  35. //this.$on('evtType2', this.evtTypeHandler)  
  36.   
  37. },  
  38.   
  39. evtTypeHandler (evt) {  
  40.   
  41. console.info(`子组件：事件响应: `, evt.type, evt.detail)  
  42.   
  43. // 结束事件传递  
  44.   
  45. // evt.stop()  
  46.   
  47. },  
  48.   
  49. evtType2Emit () {  
  50.   
  51. this.$dispatch('evtType2', { params: '额外参数' })  
  52.   
  53. },  
  54.   
  55. evtType3Emit () {  
  56.   
  57. this.$emit('evtType3', { params: '额外参数' })  
  58.   
  59. }  
  60.   
  61. }  
  62.   
  63. </script>  

解释一下

在上文我已做了如下说明

（编辑：PHP编程网 - 湛江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
相关内容
    推荐文章
    站长推荐
    热点阅读

    【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

    建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

    Copygight © 2008-2022 https://www.0759zz.com/ All Rights Reserved. PHP编程网 - 湛江站长网