Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)

一、封装组件,组件的使用

1.1、 全局组件

         1.1.1、建立一个文件夹,包含组件.vue、index.js,示例如下

                 Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第1张图片

 

        1.1.2、【index.js文件】需要将自定义组件isNetwork.vue注册到vue中,再导出(注意Vue.component全局注册一个组件函数,的第一个参数`no-network`,对应使用时的标签名),示例如下:

              Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第2张图片

 

        1.1.3、【main.js文件】入口文件引入全局组件,并注册

              Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第3张图片

              

        1.1.4、【使用全局组件】  

              Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第4张图片

 

1.2 、父子组件(每次使用子组件,需要在父组件中引入)

         1.2.1、【父组件.vue】引入子组件(header.vue),并修改组件名为UserHeader,然后直接使用即可

             Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第5张图片           

            

 


二、组件之间如何传值(涉及Vue的边界处理情况,还是推荐 Vuex 来管理应用的状态)

2.1、父子组件传值(父组件  修改  子组件  的值)

         2.1.1、【父组件中】引入子组件之后,定义需要传递给子组件的值(query属性),然后标签中通过`:query=query`传递值

             Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第6张图片 Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第7张图片

            

 

         2.1.2、【子组件中】用prop属性设置,需要父组件传递的值(可规定数据类型、是否必须),接收之后,就是this.query,子组件可以像使用data数据一样使用该值(query)  

             Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第8张图片        Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第9张图片 

 

         2.1.3、【父组件 通过访问$ref访问子组件】

    【父组件中引入子组件、定义ref值为‘form’,就可以通过this.$ref.form获取子组件的数据、函数等】

   Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第10张图片

Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第11张图片


    【子组件也需要定义ref属性值哈】 

Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第12张图片

 

2.2、父子组件传值(子组件  分发 父组件 的事件 、修改 父组件的数据值、调用父组件的函数、依赖注入等)

         2.2.1、【子组件分发父组件的事件】子组件bigImg.vue,通过$emit分发事件,示例如下,当点击事件'bigImg'函数时,分发父组件的'clickBigImg'事件,示例方法/事件(vm.$on、$once、$emit、$off,参考这里)

              Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第13张图片

 

         2.2.2、【父组件homecse.vue中】通过使用子组件时,在其标签中添加@clickBigImg事件(事件名与子组件中分发的函数名一致),其中调用了viewImg函数(函数名自定义)

             Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第14张图片

 

         2.2.3、【子组件  修改父组件的数据值、调用父组件的函数】

                        当确定该组件只有一个父组件时,可以使用$parent,修改父组件的值,注意推荐依赖注入哈

                        【父组件中有page属性、init()函数】

                         Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第15张图片

 

         2.2.4、【依赖注入】Vue2.2.0 新增功能,provide/inject,默认provide 和 inject 绑定并不是可响应的。但是,想要响应式怎么办,传递一个对象,对象的属性就会是响应式,参考这里   Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第16张图片

          注意: 如果你想要共享的这个属性是你的应用  特有的 ,而不是通用化的,或者如果你想在祖先组件中 更新 所提供的数据,那么这意味着你可能需要换用一个像 Vuex 这样真正的状态管理方案了

【父组件,直接传递基本数据类型的值,如下面示例的'radio3'属性值,子组件的数据就不会实时更新】

所以!!!传递一个对象,为了方便直接传递了$data对象,哈哈哈

Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第17张图片


【子组件如下,本次Vue版本是2.5.2】

Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第18张图片


【控制台打印如下】

Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第19张图片

Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第20张图片

 

         2.2.5、【vuex 状态管理】通过vuex进行状态值管理,父组件和非父子组件都可以使用

主要在store中

  • 存储状态值state
  • 设置getters,方便获取state值,通过store.getters.xxx获取(组件中可以通过在 computed 属性中添加回调函数 ...mapGetters(['属性名'])  ,然后就可直接 this.属性名 调用)
  • 在mutations封装函数,类似同步函数,通过store.commit('xxx')分发事件
  • 在actions封装函数,类似异步函数,通过store.dispatch('xxx')分发事件(组件中可以通过在 methods 属性中添加回调函数 ...mapActions(['函数名'])  ,然后就可直接 this.函数名 调用)

例如:

Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第21张图片


【store的index.js文件,其中导出了自定义模块 settting,使用了插件 `vuex-persistedstate` 保证刷新不丢失数据,/src/store/index.js文件】

Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第22张图片


【模块文件,/src/store/model/setting/index.js文件】

Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第23张图片


【导出模块文件,/src/store/model/setting/index.js文件】

Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第24张图片


【组件中调用示例】

Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第25张图片

 

         2.2.6、【需要注意的点  】父子组件中,通过$refs、$children、$parent获取的注意点    

1、$refs

  • 子组件自身带有标记
  • 父组件调用也需要写上ref,就可以通过this.$refs.form调用子组件

 

2、$parent和$children

  • 组件最好只能有一个根节点(不然需要this.$parent.$parent,不利于维护)
  • 可以在子组件中使用---> this.$parent.属性值/(或)函数
  • 在父组件中使用---> this.$refs.组件的标记,访问子组件,或者---> this.children[i].属性值/(或)函数,访问子组件
  • 注意this的指向

 

2.3、【非父子组件】的通信传递 Vue Event Bus,使用Vue的实例,实现事件的监听和发布,实现组件之间的传递

         2.3.1、事件中间件:Bus,使用方式,定义到全局main.js,安装vue-bus:`npm install vue-bus --save-dev`

                     缺点: 刷新,数据消失

                        【main.js文件】

                        Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第26张图片

                        【分发事件的组件, {xi: 'xxi'}测试的对象数据】

                        Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第27张图片

                        【触发事件的组件,第二个参数,传递函数名即可】

                        Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第28张图片

                        Vue 封装组件的方法及组件之间传值问题(父子组件、非关系组件等,运用$parent、依赖注入等方法)_第29张图片                                   

 

         2.3.2、还可以通过inheritAttrs + $attrs + $listeners传递,参考这里

 

 

写给自己的随笔,有问题欢迎指出(〃>皿<)

 

 

 

 

 

 

你可能感兴趣的:(前端)