1. 概述

老话说的好：心态决定命运，好心态才能有好的命运。

言归正传，今天我们来聊聊 VUE 中的全局 Mixin 与 自定义属性合并策略。

2. Mixin 的使用

2.1 全局 Mixin

之前咱们介绍的 Mixin 用法，是局部 Mixin，需要在组件和子组件中使用 mixins:[myMixin] 去引入 Mixin，下面我们介绍 全局 Mixin。

  1. <body>
  2.     <div id="myDiv"></div>
  3. </body>
  4. <script>
  5.     const app = Vue.createApp({
  6.         data(){
  7.             return {
  8.                 num : 1
  9.             }
  10.         },
  11.  
  12.         created() {
  13.             console.info('created');
  14.         },
  15.  
  16.         methods : {
  17.             myAdd() {
  18.                 console.info('myAdd');
  19.             }
  20.         },
  21.  
  22.         template:`
  23.             <div>
  24.                 <button @click="myAdd">增加</button>
  25.                 <div>{{num}}</div>
  26.                 <sub-com />
  27.             </div>
  28.         `
  29.     });
  30.     app.mixin({
  31.         data(){
  32.             return {
  33.                 num : 2,
  34.                 count : 1
  35.             }
  36.         },
  37.         created() {
  38.             console.info('myMixin created');
  39.         },
  40.         methods : {
  41.             myAdd() {
  42.                 console.info('myMixin myAdd');
  43.             }
  44.         },
  45.     });
  46.  
  47.     app.component('sub-com', {
  48.         template: `
  49.             <div>{{count}}</div>
  50.         `
  51.     });
  52.  
  53.     const vm = app.mount("#myDiv");
  54.  
  55. </script>

使用 app.mixin 声明的 Mixin 就是全局 Mixin，全局 Mixin 不需要在组件或子组件中使用 mixins:[myMixin] 去引入 Mixin，效果和局部 Mixin 一样。

2.2 自定义属性的使用

  1.     const myMixin = {
  2.         num : 2
  3.     }
  4.  
  5.     const app = Vue.createApp({
  6.         num : 1,
  7.  
  8.         mixins:[myMixin],
  9.  
  10.         template:`
  11.             <div>
  12.                 <div>{{this.$options.num}}</div>
  13.             </div>
  14.         `
  15.     });

这个例子中的 num 就是自定义属性，渲染时使用 {{this.$options.num}} 得到自定义属性。

自定义属性，不写在 data 里，组件中的自定义属性优先级高于 Mixin 中的自定义属性。

2.3 自定义属性合并策略

自定义属性的优先级可以调整，我们来看下面的例子

  1.     const myMixin = {
  2.         num : 2
  3.     }
  4.  
  5.     const app = Vue.createApp({
  6.         num : 1, 
  7.  
  8.         mixins:[myMixin],
  9.  
  10.         template:`
  11.             <div>
  12.                 <div>{{this.$options.num}}</div>
  13.             </div>
  14.         `
  15.     });
  16.  
  17.     app.config.optionMergeStrategies.num = (mixinValue, appValue) => {
  18.         return mixinValue || appValue; // 意思是先使用 mixinValue，如果 mixinValue 不存在，再使用 appValue
  19.     }

这个例子中，我们使用 app.config.optionMergeStrategies.num，对自定义属性 num 的优先级进行了调整。

3. 综述

今天聊了一下 VUE3 中的全局 Mixin 与 自定义属性合并策略，希望可以对大家的工作有所帮助，下一节我们继续讲 Vue 中的高级语法，敬请期待

欢迎帮忙点赞、评论、转发、加关注 ：）

关注追风人聊Java，这里干货满满，都是实战类技术文章，通俗易懂，轻松上手。

4. 个人公众号

追风人聊Java，欢迎大家关注

VUE3 之 全局 Mixin 与 自定义属性合并策略 - 这个系列的教程通俗易懂，适合新手的更多相关文章

  1. VUE3 之 使用 Mixin 实现代码的复用 - 这个系列的教程通俗易懂，适合新手

    1. 概述 老话说的好:舍得舍得,先舍才能后得. 言归正传,今天我们来聊聊 VUE 中使用 Mixin 实现代码的复用. 2. Mixin 的使用 2.1 不使用 Mixin 的写法 <body ...

  2. VUE3 之 使用标签实现动画与过渡效果 - 这个系列的教程通俗易懂，适合新手

    1. 概述 巴纳姆效应告诉我们: 人们更容易相信笼统的.常见的人格描述,并觉得特别适合自己,认为该描述真实地反映了自己的人格面貌. 这也是所有算命先生的小把戏,算命先生通常把话说的很笼统,很通用,基本 ...

  3. VUE3 之 多个元素之间的过渡 - 这个系列的教程通俗易懂，适合新手

    1. 概述 老话说的好:过去不等于未来,过去成功了不代表将来也会成功,过去失败了也不代表将来也会失败. 言归正传,今天我们聊聊多个元素之间的过渡. 2. 多个元素之间的过渡 2.1 两个元素交替显示 ...

  4. VUE3 之 多个 v-model 绑定及 v-model 修饰符的使用 - 这个系列的教程通俗易懂，适合新手

    1. 概述 洛克定律告诉我们: 当我们的目标很远大,远到我们都看不到终点时,放弃几率就会很大,就像跑马拉松比赛,由于时间长.距离长,很多选手都会选择在中途放弃. 其实有个好办法,就是拆分,把大目标拆分 ...

  5. VUE3 之 插槽的使用 - 这个系列的教程通俗易懂，适合新手

    1. 概述 非理性定律告诉我们: 人们总是习惯于以情感去判断眼前的事物,非理性的去做决定. 对于长远的利益,人们更愿意去选择短期的利益. 因此在做决定前要让自己冷静,理性的分析,让自己看的更远. 言归 ...

  6. VUE3 之 作用域插槽 - 这个系列的教程通俗易懂，适合新手

    1. 概述 破窗效应告诉我们: 当一个建筑物窗户的玻璃完好无损时,很少有人想去破坏它,当有一个人破坏了一块窗户的玻璃,其他窗户的玻璃也很快会被人破坏. 同理,一个很干净的地方,人们不好意思去丢垃圾,但 ...

  7. VUE3 之 动态组件 - 这个系列的教程通俗易懂，适合新手

    1. 概述 暗示效应告诉我们: 巧妙的暗示会在不知不觉中剥夺我们的判断力,对我们的思维形成一定的影响,造成我们行为的些许改变或者偏差. 例如你的朋友说你脸色不太好,是不是病了,此时,你可能就会感觉浑身 ...

  8. VUE3 之 ref、provide、inject 的使用 - 这个系列的教程通俗易懂，适合新手

    1. 概述 首因效应告诉我们: 在日常交往中,第一印象是非常重要的,好的第一印象能让我们在与人相处时事半功倍. 但也从另一面告诉我们,不能仅凭第一印象去判断一个人,有时虚假的第一印象,也有可能蒙蔽我们 ...

  9. VUE3 之 动画与过渡的实现 - 这个系列的教程通俗易懂，适合新手

    1. 概述 光环效应告诉我们: 当一个人在某一方面取得了巨大的成功,人们就会给他贴上正面的标签,这个人从此就被"优秀"的光环所笼罩,他做的一切,人们都认为是正确的. 例如:越是名气 ...

随机推荐

  1. AQS 详解之共享锁模式

    概括 AQS框架数据结构是一个先进先出的双向队列,当多个线程进行竞争资源时,那些竞争失败的线程会加入到队列中.他向上层提供了很多接口,其中一个是acquireShared获取共享模式的接口.本文将会根 ...

  2. js中的函数嵌套和闭包

    小编已经有一段时间没有更新文章了,最近一直在考虑接下来要更新什么内容.接下来,小编会围绕以下三个方面更新文章.实际项目中遇到的问题和解决方案.Vue源码解析.代码重构.关于数据可视化.小编也会按照这个 ...

  3. Python 的排序方法 sort 和 sorted 的区别

    使用 sort() 或内建函数 sorted() 对列表进行排序.它们之间的区别有两点: sort() 方法是对原列表进行操作,而 sorted() 方法会返回一个新列表,不是在原来的基础上进行操作. ...

  4. 细说MVC框架的几大困惑：

    --千万不要为了学习框架而学习框架,而是要为了解决问题而学习框架,这才是一个程序员的正确学习之道. --框架是为了解决一个又一个在Web开发中所遇到的问题而诞生的.不同的框架,都是为了解决不同的问题, ...

  5. Kubernetes：存储管理

    Blog:博客园 个人 参考:Volumes | Kubernetes.Persistent Volumes | Kubernetes.Kubernetes 基础入门实战 简单来说,存储卷是定义在Po ...

  6. web测试知识点整理

    web是如何测试的? 1. 通用功能测试和可用性测试 2. 性能测试和安全性测试 3. 兼容性测试 4. 数据库和稳定性测试等 web功能测试怎么测? 从一下几个方面来进行WEB测试: 1. 链接测试 ...

  7. JavaScript 的诞生历史

    看到一篇介绍JS诞生历史的文章,很有意思,文章里描述了很多的历史细节 https://webdevelopmenthistory.com/1995-the-birth-of-javascript/

  8. 羽夏笔记——Hook攻防基础

    写在前面   本笔记是由本人独自整理出来的,图片来源于网络.本人非计算机专业,可能对本教程涉及的事物没有了解的足够深入,如有错误,欢迎批评指正. 如有好的建议,欢迎反馈.码字不易,如果本篇文章有帮助你 ...

  9. 面试之Java String 编码相关

    实话说,作为一个多年Java老年程序员,直到近来,在没有决心花时间搞清楚Java String的编码相关问题之前, 自己也都还是似懂非懂,一脸懵逼的.设想如果在面试中,有同学能够条理清晰的回答下面的问 ...

  10. 什么是原子操作？在 Java Concurrency API 中有哪些原 子类(atomic classes)？

    原子操作(atomic operation)意为"不可被中断的一个或一系列操作" . 处理器使用基于对缓存加锁或总线加锁的方式来实现多处理器之间的原子操作. 在 Java 中可以通 ...