设为首页 - 加入收藏 ASP站长网（Aspzz.Cn）- 科技、建站、经验、云计算、5G、大数据,站长网！
热搜： 重新 试卷 文件
当前位置： 首页 > 运营中心 > 建站资源 > 优化 > 正文

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

发布时间：2019-02-27 01:50 所属栏目：21 来源：王波
导读：1 在comp-part1标签中，我们看到这样一个属性，onevt-type3=evtTypeHandler，这是指，在该节点上绑定了名为evtType3的方法，被触发后，执行evtTypeHandler的函数，在下文的父子之间组件事件传递中，会看到如何触发

1 在comp-part1标签中，我们看到这样一个属性，onevt-type3="evtTypeHandler"，这是指，在该节点上绑定了名为evtType3的方法，被触发后，执行evtTypeHandler的函数，在下文的‘父子之间组件事件传递’中，会看到如何触发该方法。

2 代码中的evtType1Emit方法，该方法通过调用$broadcast方法，触发了名为'evtType1'的事件，并传递了params参数，'evtType1'事件也可以在下文‘父子组件之间事件传递’中看到。

传递数据与数据改造

如上面所述，父组件向子组件传递数据，通过在子组件的props属性中声明对外暴露的属性名称，然后在组件引用标签上声明传递的父组件数据。

如果你需要在子组件中对数据进行改造，但又不想改动父组件数据时，可以使用$watch()来满足需求。如果是监听对象中的属性，参数请使用.分割，如：$watch(xxx.xxx.xxx, methodName)

示例如下：

  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>  

解释一下

在上文我已做了如下说明

（编辑：ASP站长网）
相关内容
网友评论
推荐文章
    热点阅读

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

      建议您使用1366×768 分辨率、Microsoft Internet Explorer 11浏览器以获得本站的出色浏览效果

      Copygight © 2008-2023 http://www.aspzz.cn All Rights Reserved. ASP站长网

      站长：nqiang002#foxmail.com（请把#换成@）