D - Vue 混入

最新推荐文章于 2022-10-17 15:33:29 发布
最新推荐文章于 2022-10-17 15:33:29 发布
阅读量100 收藏
点赞数
分类专栏： Vue.js 文章标签： vue js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46878411/article/details/119742685
版权
Vue.js的混入（Mixins）机制允许开发者创建可复用的功能组件，通过全局注册或局部应用实现组件间的选项合并。当选项参数重名时，组件选项优先级高于混入对象。混入的钩子函数会被合并，并在组件钩子之前调用。虽然不能为单个组件定义自定义合并策略，但可以通过全局策略调整选项合并行为。
摘要由CSDN通过智能技术生成

开端

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项

混入对象说白了就是,把混入对象的Vue选项,全部加入组件Vue选项里,若是选项内参数重名会采用一些策略,下面会描述到这些策略

全局注册:Vue.mixin( mixin : Object )

全局注册一个混入，影响注册之后所有创建的每个 Vue 实例(包括第三方组件) , 不建议

选项:mixins : Array<Object>

重名 与 合并

当选项参数重名后,默认是优先选择组件
当选项参数没有重名,便会合并
例如:
在这里插入图片描述注意的是 同名选项钩子函数将合并为一个数组，因此都将被调用。另外，混入对象的钩子将在组件自身钩子之前调用

自定义选项合并策略

好像只能定义全局策略,没找到可以单个组件定义策略的方法

请添加图片描述

艾仪
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue 混入
且听风吟的博客
03-27 2787
vue 混入：一种灵活的方式，来分发组件的可复用功能。
Vue混入模式
weixin_52283244的博客
08-03 432
一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。 一个独立的拥有完整的vue组件选项的对象,这个对象上的所有的选项可以加入到 .vue 组件中 作用:分发 Vue 组件中的可复用功能 场景：如果我们想做的事情是针对于每一个组件都要做这件事儿 如 : // 定义一个混入对象 var myMixin = { created: function () { this.hello() }, methods: { ...
D - Vue 自定义指令
无生 的博客
08-17 216
开端 指令前缀是 v- ,自动加上去,也取消不了 全局定义:Vue.directive( id, [definition] )  id: string 指令名  [definition]: Function | Object 局部选项:directives : Object directives:{ 指令名:{ ... }, ... } 钩子函数 达到一定的时机,会自动触发的函数 bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 inserted
D - Vue快速生成项目-安装插件
无生 的博客
09-03 220
项目初始化 vue init webpack 项目名 ? 项目名称 ? 项目描述 ? 作者 ? Vue build standalone ? 安装vue-router组件 (建议安装) ? 安装ESLint组件,对代码格式要求高 (不建议安装) ? 单元测试 ? e2e测试 ? (无脑选 npm ) 常用插件 每次建项目都忘记需要那些插件 或 忘记怎么配置 ,干脆全部集合在一起 本文是 Vue2 ,Vue3的配置可能有细小的不同 Vuex npm install vuex --save imp
Vue项目实战-vue2(移动端)
m0_57860459的博客
03-07 9105
Vue项目实战(移动端)# 相关资料 (一) 创建项目 (二) 禁用Eslint (三) devtool (四) 添加less支持 (五) vue路由配置(背诵) (六) 父子组件通信(背诵) (七) axios拦截器(背诵) (八) Sticky 粘性布局 (九) 图片懒加载 (十) 全局注册组件 (十一) slot插槽 (十二) 使用ui库需要关注的三点 (十三) 三种路由传参方式(背诵) (十四) 模拟数据 (十五) 计算属性computed和属性观察watch (十
前端面试题--vue
weixin_44501366的博客
10-17 5003
每个组件都是 Vue 的实例。组件共享 data 属性，当 data 的值是同一个引用类型的值时，改变其中一 个会影响其他.Less的简单使用（一）——变量的用法Less是css的扩展，Less不仅与CSS向后兼容，而且它添加的其他功能都使用现有的CSS语法。变量一、变量正常用法（variables）在一个位置控制常用值.less文件中} **
系统学习大前端(12) --- Vue.js 源码分析
柒月
08-31 378
准备工作 Vue源码获取 项目地址 fork一份到自己仓库 vue3.0地址 源码目录结构 src compiler 编译相关 core Vue核心库 platforms 平台相关代码 server SSR服务端渲染 sfc .vue文件编译为JS对象 shard 公共的代码 Flow JS的静态类型检查器 官网 参考-3、flow 调试设置 打包工具 Rollup 安装依赖 npm i 设置sourcemap package.json文件中的dev脚本中
vue+vue-cli3 与 typeScript 的引入与混入
江城的博客
06-08 1032
前言： TypeScript的设计目的应该是解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化，不适合开发大型程序。另外它还提供了一些语法糖来帮助大家更方便地实践面向对象的编程。---- 引入 TypeScript官方文档地址 主题： 第一步、安装依赖： npm、cnpm、yarn都支持 npm install typescript ts-loader --save-dev npm install vue-property-decorator --save-dev 第二步、配置vue.
vue-cli3 js项目中引入ts混用typeScript1
08-08
由于Vue CLI默认不理解`.vue`文件中的TypeScript语法，所以需要创建一个声明文件`vue-shim.d.ts`来解决这个问题。在项目根目录下创建此文件，并输入以下内容： ```typescript declare module "*.vue" { import Vue...
Vue v-bind修饰符.prop property 与 attribute 的差别
无生 的博客
08-09 1410
property 与 attribute 区别.prop 声明:前面没有带入Vue描述,Vue在后面带入 在浏览器解析 DOM 树渲染页面后，每个标签都会生成一个对应的 DOM 节点。节点是一个对象，所以会包含一些 properties，attributes 也是其中一个property –在一个国外论坛上找到的,希望能够方便理解– HTML attribute vs. DOM property   HTML 属性与 DOM 属性 The HTML attribute value specifies
Vue 插槽＜slot＞＜/slot＞ - 笔记
无生 的博客
08-08 1076
Vue插槽 - 笔记插槽具名插槽作用域插槽(prop道具反转)独占默认插槽的缩写语法解构插槽 prop(道具)指定插槽道具指定插槽道具 之 重命名指定插槽道具 之 后备内容动态插槽名缩写提示 我是跟着官方学的,官方文章挺好的,强烈建议看官方的 你好奇看看也行,要是你评论的话,我会害羞的(✿◡‿◡) 我的语文很烂,你忍一下 (吴亦凡梗) 插槽 插槽:<slot></slot> 插槽是被应用在 template(组件模板)内的 就像把一个外部的东西,插入内部一样 比如:以前的游戏
Rust - Rocket 和 Vue 简单实现分片上传
无生 的博客
04-06 984
第一次写分片上传,记录一下~ 刚学Rust没多久,代码有点乱,勉强可以浅看一看 还没实现 续传,未来可能更新这篇文章 首先 确定临时文件目录 fn 分片_root_path<P: AsRef<Path>>( path: P)-> PathBuf { Path::new("./public/分片").join(path) } 确定trait(接口) pub trait 分片 { /** #推入一个分片 */ fn push_data(&self,piec
Vue v-on常用事件名 - 持续更新
无生 的博客
08-15 794
好文: https://www.cnblogs.com/torchstar/p/11799394.html 好文++;顶一个++;大佬牛逼++; 不是按照类分的,单纯是我常用的放在前面 事件名 触发条件 keydown 按下任意按键 keypress 除 Shift、Fn、CapsLock 外的任意键被按住（连续触发） keyup 释放任意按键 click 在元素上 按下并释放任意鼠标按键 auxclick 已在元素上按下并释放指针设备按钮（任何非主按钮） conte
D - Vue-Router - 持续补充 - 笔记
无生 的博客
08-18 676
这里写目录标题提前官方文档安装Router插件方便阅读开端 ~Router ~ ~routes选项 ~ ~ ~RouteConfig 的类型定义 ~ ~ ~ ~路由对象$route ~ ~具体使用 ~动态路由匹配 ~ ~ 提前 官方文档 https://router.vuejs.org/zh/ 唯一不好的是,没有一个在线例子可以打开,可能是我网的原因 首先 笔记 不适合初始学习,初始学习建议看官方文档 , 笔记可以帮助我忘记后快速回忆 安装Router插件 直接引用 <script src="
Vue v-model 父子组件 双向绑定
无生 的博客
08-08 550
Vue v-model 父子组件 双向绑定 这是复杂的,我不喜欢的 (╬▔皿▔)╯ <body> <div id="A" > <p>{{a}}</p> <!-- <abc v-model="a"></abc> 等价于下面的 --> <abc :value="a" @input="a = $event"></abc> <!--这里的:value是自定义属性,@input是自定义事
D - Vue 动态组件 & 异步组件 &＜component ＞ & ＜keep-alive＞ & is prop(道具)
无生 的博客
08-09 505
Vue 动态组件 和 异步组件前提component内置组件prop(道具)`is``inline-template`用法keep-alive内置组件prop(道具)用法动态组件 前提 首先说2个Vue自带的内置组件component和 keep-alive 翻译一波,方便理解 component : 组件 keep :保存, 保留 alive :活着的 keep-alive :保持连接 推荐一个火狐浏览器的翻译扩展划词翻译,比较适合翻译小部分单词 还有一个火狐浏览器的翻译扩展翻译网页,虽然也可以划词
D - Vue 过渡动画 - 笔记
无生 的博客
08-11 399
Vue 过渡提前资源Velocity.jsVue过渡`transition内置组件常用Props(道具)事件注意事项过渡类名小疑惑过渡属性定义在非Vue类废物.v-leave ?为什么`.v-enter`不是废物 ?动画 //未完工~ 提前 如果您已经会了css的过渡属性transition和贝塞尔曲线,可以跳过提前 如果您忘的差不多了或不知道,可以看下一下这个 CSS 贝塞尔曲线 和 过渡属性transition 资源 Velocity.js <script src="https://cdn.jsd
Vue 访问 [ 根 , 父 , 子 ] 实例 和 依赖注入
无生 的博客
08-09 380
访问 [ 根 , 父 , 子 ] 实例 和 依赖注入访问根实例访问父级组件实例访问子组件实例或子元素依赖注入 实例就是一个对象,就是一个变量 访问根实例 通过 $root 所有后代子组件都可以访问 根实例 <根组件> <子组件> <孙组件> {{$root.a}} <!--在 孙组件 中访问 根实例 的a--> </孙组件> <!--你可以当做组件内都有一个插槽 或 当做概念看一下,主要是表达任何组件都可以直接访问根实例-
unplugin-vue-components -D
最新发布
09-10
npm install -D unplugin-vue-components ``` 或者 ```bash yarn add -D unplugin-vue-components ``` 然后，在 vue.config.js 中配置插件： ```javascript const { defineConfig } = require('@vue/cli-service') ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

艾仪

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值