首页 > 其他分享 >vue组件之间通信以及混入

vue组件之间通信以及混入

时间:2023-03-07 23:34:47浏览次数:45  
标签:选项 混入 vue 对象 钩子 Mixin 组件 返回值

子组件向父组件共享数据使用自定义事件

父向子用自定义属性

兄弟之间用eventbus

组件的$nextTick(cb)方法,会把cb回调到下一个dom更新周期之后执行

Vue2 中非父子组件之间用的是eventbus,而Vue3中非父子通信用的是全局事件总线和Provide/Inject

对于缓存的组件来说,再次进入时,我们是不会执行created或者mounted等生命周期函数的:

但是有时候我们确实希望监听到何时重新进入到了组件,何时离开了组件;

这个时候我们可以使用activated 和 deactivated 这两个生命周期钩子函数来监听;

混入:Mixin(将相同的代码抽取出来,封装在一个单独的js文件中,提高的代码的复用性)

在Vue2和Vue3中都支持的一种方式就是使用Mixin来完成

 Mixin提供了一种非常灵活的方式,来分发Vue组件中的可复用功能;

 一个Mixin对象可以包含任何组件选项;

 当组件使用Mixin对象时,所有Mixin对象的选项将被 混合 进入该组件本身的选项中;

 

如果Mixin对象中的选项和组件对象中的选项发生了冲突,那么Vue会如何操作呢?

 这里分成不同的情况来进行处理;

情况一:如果是data函数的返回值对象

 返回值对象默认情况下会进行合并;

 如果data返回值对象的属性发生了冲突,那么会保留组件自身的数据;

情况二:如何生命周期钩子函数

 生命周期的钩子函数会被合并到数组中,都会被调用;

情况三:值为对象的选项,例如 methods、components 和 directives,将被合并为同一个对象。

 比如都有methods选项,并且都定义了方法,那么它们都会生效;

 但是如果对象的key相同,那么会取组件对象的键值对;

标签:选项,混入,vue,对象,钩子,Mixin,组件,返回值
From: https://www.cnblogs.com/guorunbin/p/17190185.html

相关文章

  • vuex笔记
    Vuex在开发中,我们会的应用程序需要处理各种各样的数据,这些数据需要保存在我们应用程序中的某一个位置,对于这些数据的管理我们就称之为是状态管理src/store/index.js......
  • Luffy项目:5、腾讯云短信封装,luffy项目登录注册后端逻辑API接口编写,前端页面及Vue编写
    目录Luffy项目一、腾讯云短信开发1、封装发送短信二、登录/注册后端逻辑API编写1、发送短信验证码接口2、短信登录接口2、1.视图类2、2.序列化类3、短信注册接口3、1.路......
  • v-model 在vu2和vue3的使用
    首先看到v-model,大多数小伙伴都会想到“响应式”、“双向绑定”,v-model确实是实现了双向绑定数据,用过vue的人都比较熟悉。v-model是Vue内置的指令,vue2和vue3中的v-mod......
  • Vue核心虚拟Dom和 diff 算法
    一、介绍虚拟DOM什么是虚拟DOM?之前我的理解:虚拟DOM是一个真实DOM的映射,Vue是拿虚拟DOM描述真实DOM,虚拟DOM体积比真实DOM小,每次操作虚拟DOM都会触发重排,判断虚拟DOM发生......
  • VUE+.NET应用系统的国际化-整体设计思路
    近期产品要支持国际化多语言,主要涉及前端界面国际化以及后端提示信息、异常信息的国际化多语言支持。目前我们的开发技术栈:前端VUE、后端.NET。面向前端界面和后端服务,分......
  • 图片视频组件封装
          <template><div><el-uploadref="upload":class="disabled?'disabled':''"list-type="picture-card":actio......
  • 封装bootstrap的Toasts组件实现的多个下载任务弹框
    最近要改一个下载任务的需求,原来的代码要么使用ajax异步请求看不到下载进度,要么使用window.open(url,‘__blank’)打开一个新页面既看不到下载进度也要手动关闭新打开的窗口......
  • uni-app 组件传值 props 对象中传有方法, 小程序上被过滤
    uni-app组件传值props对象中传有方法,微信小程序上会被过滤,uniapp小程序props传值丢失uniapp中父组件向子组件传递prop时,如果prop是对象,对象内部不能包含function属......
  • 谷歌google安装vue插件
    链接:https://github.com/vuejs/devtools默认是main分支,需要切换到add-remote-dev,然后点击下载压缩包zip,解压到某位置解压之后管理员运行cmd命令提示符窗口,cdD:**......
  • 基于ElementUI和Vue.js的SUNBOOK图书后台管理系统(纯HTML、原生Java后端开发)
    一、项目介绍-使用element-ui、axios和Vue.js实现SUNBOOK的页面结构及网页请求-通过JSON传递请求与响应参数-在后端使用JdbcUtilsByDruid实现对数据的增加、删除、......