【Vue3 从入门到实战 进阶式掌握完整知识体系】024-Vue中的高级语法：Mixin混入的基础语法

最新推荐文章于 2024-08-02 00:34:21 发布
最新推荐文章于 2024-08-02 00:34:21 发布
阅读量291 收藏
点赞数
分类专栏： Vue.js 文章标签： vue javascript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_29689343/article/details/118370323
版权

文章目录

五、Vue中的高级语法

1、Mixin混入的基础语法

不推荐使用全局 mixin，vue3之后就不推荐使用 mixin 了，组合式 api 取代 mixin ， mixin 的可维护性不高！

混入data

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  // Minxin 混入
  const mymixin = {
    data(){
      return{
        num: 2,
        count: 100
      }
    }
  }
  const app = Vue.createApp({
    data(){
      return{
        num: 1
      }
    },
    // mixins：我们知道 vue实例自身数据里面有个 num 这里又混入一个 num
    // 当混入的内容与组件原有内容有冲突时，优先使用原有的内容
    // 当组件原有内容不存在混入的内容时，使用混入的内容
    // 优先级：组件 data > mixin data
    mixins: [mymixin],
    methods:{
      handleClick(){
        console.log("handleClick");
      }
    },
    // num 组件数据里面有，使用组件里面的 1
    // count 组件数据里面没有，就是用混入里面的 100
    template: `
        <div>
          <div>{{num}}</div>
          <div>{{count}}</div>
          <button @click="handleClick">点击</button>
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210614095009285.png

混入生命周期函数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  // Minxin 混入
  const mymixin = {
    data(){
      return{
        num: 2,
        count: 100
      }
    },
    // 混入生命周期函数
    created(){
      console.log("混入生命周期函数：created");
    }
  }
  const app = Vue.createApp({
    data(){
      return{
        num: 1
      }
    },
    // mixins：我们知道 vue实例自身数据里面有个 num 这里又混入一个 num
    // 当混入的内容与组件原有内容有冲突时，优先使用原有的内容
    // 当组件原有内容不存在混入的内容时，使用混入的内容
    // 优先级：组件 data > mixin data
    mixins: [mymixin],
    methods:{
      handleClick(){
        console.log("handleClick");
      }
    },
    // num 组件数据里面有，使用组件里面的 1
    // count 组件数据里面没有，就是用混入里面的 100
    template: `
        <div>
          <div>{{num}}</div>
          <div>{{count}}</div>
          <button @click="handleClick">点击</button>
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210614095204466.png

组件和混入同时存在同一生命周期函数

都会执行：先执行混入的生命周期函数，后执行组件的生命周期函数

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  // Minxin 混入
  const mymixin = {
    data(){
      return{
        num: 2,
        count: 100
      }
    },
    // 混入生命周期函数
    created(){
      console.log("混入生命周期函数：created");
    }
  }
  const app = Vue.createApp({
    data(){
      return{
        num: 1
      }
    },
    // mixins：我们知道 vue实例自身数据里面有个 num 这里又混入一个 num
    // 当混入的内容与组件原有内容有冲突时，优先使用原有的内容
    // 当组件原有内容不存在混入的内容时，使用混入的内容
    // 优先级：组件 data > mixin data
    mixins: [mymixin],
    methods:{
      handleClick(){
        console.log("handleClick");
      }
    },
    // 组件生命周期函数
    created(){
      console.log("组件生命周期函数：created");
    },
    // num 组件数据里面有，使用组件里面的 1
    // count 组件数据里面没有，就是用混入里面的 100
    template: `
        <div>
          <div>{{num}}</div>
          <div>{{count}}</div>
          <button @click="handleClick">点击</button>
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210614095440099.png

混入方法

类似混入data，优先级：组件内的方法 > 混入的方法；

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  // Minxin 混入
  const mymixin = {
    // 混入数据
    data(){
      return{
        num: 2,
        count: 100
      }
    },
    // 混入生命周期函数
    created(){
      console.log("混入生命周期函数：created");
    },
    // 混入方法
    methods:{
      // 组件内存在的方法
      handleClick(){
        console.log("混入的handleClick");
      },
      // 组件内不存在的方法
      handleClick2(){
        console.log("混入的handleClick2");
      }
    }
  }
  const app = Vue.createApp({
    data(){
      return{
        num: 1
      }
    },
    // mixins：我们知道 vue实例自身数据里面有个 num 这里又混入一个 num
    // 当混入的内容与组件原有内容有冲突时，优先使用原有的内容
    // 当组件原有内容不存在混入的内容时，使用混入的内容
    // 优先级：组件 data > mixin data
    mixins: [mymixin],
    methods:{
      handleClick(){
        console.log("handleClick");
      }
    },
    // 组件生命周期函数
    created(){
      console.log("组件生命周期函数：created");
    },
    // num 组件数据里面有，使用组件里面的 1
    // count 组件数据里面没有，就是用混入里面的 100
    template: `
        <div>
          <div>{{num}}</div>
          <div>{{count}}</div>
          <button @click="handleClick(), handleClick2()">点击</button>
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210614100029044.png

使用全局Mixin

全局的Maixin不推荐使用！

默认再父组件引入的 mixin 无法在子组件里面使用，需要子组件也引入，当前我们定义的 mixin 是局部的 mixin ，让我们来定义全局的 mixin ， 全局的 mixin 和全局组件非常类似！

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  
  const app = Vue.createApp({
    data(){
      return{
        num: 1
      }
    },
    // 不需要引入了
    // mixins: [mymixin],
    methods:{
      handleClick(){
        console.log("handleClick");
      }
    },
    // 组件生命周期函数
    created(){
      console.log("组件生命周期函数：created");
    },
    template: `
        <div>
          <div>{{num}}</div>
          <div>{{count}}</div>
          <child />
          <button @click="handleClick(), handleClick2()">点击</button>
        </div>
    `
  });

  // 定义全局 mixin
  app.mixin({
    // 混入数据
    data(){
      return{
        num: 2,
        count: 100
      }
    },
    // 混入生命周期函数
    created(){
      console.log("混入生命周期函数：created");
    },
    // 混入方法
    methods:{
      // 组件内存在的方法
      handleClick(){
        console.log("混入的handleClick");
      },
      // 组件内不存在的方法
      handleClick2(){
        console.log("混入的handleClick2");
      }
    }
  });

  // 定义子组件
  app.component("child", {
    // 不需要引入了
    // mixins: [mymixin],
    template: `
      <div> 子组件里混入的count：{{count}}</div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210614102001166.png

自定义属性

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  // Minxin 混入
  const mymixin = {
    // 自定义一个 num 属性，注意这个 num 不在 data 里面
    num: 2,
  }
  const app = Vue.createApp({
    // 自定义一个 num 属性，注意这个 num 不在 data 里面
    num: 1,
    mixins: [mymixin],
    // 自定义的属性，在插值语法中要使用 this.@options.num 使用
    // 所有的属性都会挂载在 this.$options 上
    template: `
        <div>
          <div>{{this.$options.num}}</div>
        </div>
    `
  });

  const vm = app.mount('#root');
</script>

</html>

运行结果

image-20210614102817081.png

修改自定义属性的优先级

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>hello vue</title>
  <!-- 引入Vue库 -->
  <script src="https://unpkg.com/vue@next"></script>
</head>

<body>
  <div id="root"></div>
</body>

<script>
  // Minxin 混入
  const mymixin = {
    // 自定义一个 num 属性，注意这个 num 不在 data 里面
    num: 2,
  }
  const app = Vue.createApp({
    // 自定义一个 num 属性，注意这个 num 不在 data 里面
    num: 1,
    mixins: [mymixin],
    // 自定义的属性，在插值语法中要使用 this.@options.num 使用
    // 所有的属性都会挂载在 this.$options 上
    template: `
        <div>
          <div>{{this.$options.num}}</div>
        </div>
    `
  });

  app.config.optionMergeStrategies.num = (mixinValue, appValue) => {
    // 优先返回 mixinValue
    return mixinValue || appValue;
  }

  const vm = app.mount('#root');
</script>

</html>

运行结果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-yhJDN1ml-1625061024918)(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a074c7dbc41049edacead88cadd66093~tplv-k3u1fbpfcp-watermark.image)]

訾博ZiBo
关注
专栏目录
Vue和Vue-Element-Admin（十）：HTML和CSS快速学习笔记
叶子叶来
05-11 786
目录 html标签分类 网页布局 盒子模型 浮动 定位 css标签选择 flex布局 transform转换 Vue开发tips less和scss VScode常用插件 后端语言框架很多，Java适合企业级应用（规范且稳定），Go适合高并发场景（比如云上产品），Python框架（bottle，tornado，django）简单且快速，也天然适合数据分析场景，PHP适合快速建站，前端变化小，所见即所得，因此抽空记录下学习笔记。 如果把页面理解成一台运转的机器，html使用标签（..
Vue3 从入门到实战 进阶式掌握完整知识体系
m0_73617968的博客
09-07 911
了解的都知道，我这么不思进取的人怎么可能突发奇想的去了解一个工作中没用过的类，不出意外的，还是在今天做 LeetCode 347. 前 K 个高频元素题的时候，尝试了几次都不知道怎么做，看评论区发现这道题实际上应该是使用 优先级队列 来做，我才知道有优先级队列这么个东西。优先级队列，依旧是 顾名思义，优先级队列会自动按照元素的权值排列，也就是说，优先级队列其实有反 先进先出规则，但是其对外接口依旧是从队头取元素，队尾添加元素，再无其他存取方式，看起来就是一个队列。优先级队列其实是一个 披着队列外皮的堆。
【Vue3 从入门到实战 进阶式掌握完整知识体系】002-Vue语法基础：Vue中的应用和组件的基本部分解析、生命周期
訾博（ZiBo）的博客
06-17 522
文章目录二、Vue语法基础1、Vue中的应用和组件的基本部分代码运行结果2、理解Vue的生命周期函数*生命周期图代码运行结果关于模板Vue3的生命周期函数图Vue3全部的生命周期钩子与Vue2比较 二、Vue语法基础 1、Vue中的应用和组件的基本部分 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatib
Vue 3 入门教程：从基础知识到实战案例
最新发布
蜡笔小新星的博客
08-02 729
Vue.js 是一个渐进式的 JavaScript 框架，适用于构建用户界面。其核心概念包括组件、指令和响应式数据绑定。以上内容为 Vue 3 的基础知识和组件开发的入门教程。通过理解 HTML、CSS 和 JavaScript 的基本概念，再结合 Vue 3 的核心特性，你将能够构建出丰富的前端应用。在实现这些知识时，多进行实践和实验，将有助于你的成长和技术提升。
【Vue3 从入门到实战 进阶式掌握完整知识体系】017-探索组件的理念：动态组件和异步组件
訾博（ZiBo）的博客
06-29 674
文章目录8、动态组件和异步组件动态组件运行结果内容缓存运行结果异步组件运行结果 8、动态组件和异步组件 动态组件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=devic
【Vue3 从入门到实战 进阶式掌握完整知识体系】003-Vue语法基础：模板语法
訾博（ZiBo）的博客
06-17 524
文章目录3、常用模板语法官方文档简单插值语法运行结果插值语法内使用表达式运行结果插值语法中使用自定义函数运行结果使用v-html指令渲染html代码运行结果使用v-bind指令动态绑定属性值运行结果使用v-once指令使得插值内容不再改变运行结果使用v-if指令控制标签的加载与否show为true运行结果show为false运行结果使用v-on指令进行事件绑定运行结果简写运行结果动态绑定属性名运行结果动态绑定事件名运行结果阻止事件的默认行为运行结果 3、常用模板语法 官方文档 时间：2021年06月15日
【Vue3 从入门到实战 进阶式掌握完整知识体系】007-Vue语法基础：列表循环渲染
訾博（ZiBo）的博客
06-20 521
文章目录7、列表循环渲染使用v-for渲染数组运行结果使用v-for渲染对象运行结果使用key优化性能运行结果控制数组给对象添加属性运行结果循环n次运行结果指定某元素不显示运行结果存在问题解决问题：使用template运行结果 7、列表循环渲染 使用v-for渲染数组 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com
前端-Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
Only-CYY的博客
07-05 3879
【2022.3】尚硅谷Vue.js从入门到精通基础笔记（理论+实操+知识点速查）
3.Vue从入门到精通 （第三章 使用Vue脚手架）
cjhxydream的博客
07-21 1312
Vue从入门到精通 第三章 使用Vue脚手架
Vue开发全面指南：从基础到高级实战
Vue.js是一种流行的前端...项目实战部分涉及从需求分析到项目上线的完整流程。 最后，Vue.js拥有丰富的资源和社区支持，官方文档详尽且更新及时，社区论坛和各种学习资源如教程、文章等提供了大量的学习材料。
初识Vue-混入mixins（详解分发 Vue 组件中可复用功能）
百赢出品，必属精品
05-06 1339
混入是一种将可复用功能注入到 Vue 组件中的方式，它允许你将组件中的一些选项混合到多个组件中。混入是一种Vue.js提供的一种灵活的代码复用方式，允许将一组组件选项合并到一个对象中，然后将其应用到多个组件中。可以使用在Vue实例创建之前全局注册一个混入，使得混入对象中的选项对所有组件都可用。在组件中使用mixins选项引入一个或多个混入对象，使得这些混入对象中的选项对该组件及其子组件可用。混入对象可以包含数据、方法、生命周期钩子、计算属性、观察者和指令等组件选项。
youqin123友情模板
07-30
.申请加入免费友情链接网的网站按最后点进的时间排序首页和分类显示链接， 分类以昨日点入时间为准，每晚十二点后生成静态。 2.每来访一个IP，就会自动排到第一（无延时），当天来路不同，显示颜色也不同 3.首页白天3分钟，晚上5分钟自动更新一次，全站24小时手动更新一次。 4.站内搜索功能。 5.网址库中分离出的【名站导航】【实用工具】【友情链接】 系统后台功能 1.设置网站的基本信息。 2.管理员帐号/密码更改。 3.添加删除分类。 4.分类可修改可设置首页是否显示。 5.酷站可设置首页是否显示。 6.添加删除修改网址内容，是否推荐，是否审核。 7.可从网址库中分离出【名站导航】【实用工具】【友情链接】 8.【名站导航】【实用工具】可由快速通道添加。 9.【友情链接】从网址列表中设置。 10.站内搜索功能。 11.生成htm分类页面，生成htm主页及其它页面。 12.可修改主页，分类及其它页面模板。 13.具有数据库【备份】【压缩】【恢复】功能。 14.具有在线广告管理功能。（5个广告位）,非常方便! 15.新增站长添加的网址和用户添加的网址分开独立管理 16.防注入 17.更改验证码路径，免去别人可从验证码右键属性猜到后台。 18.后台登录地址在admin/index.asp，默认管理员账号:admin，密码:123456
【Vue3 从入门到实战 进阶式掌握完整知识体系】021-Vue中的动画：组件和元素切换动画的实现
訾博（ZiBo）的博客
06-29 280
文章目录3、组件和元素切换动画的实现代码运行结果使得它们”出入有序“运行结果第一次渲染页面就有动画效果运行效果多个单组件动画切换运行结果 3、组件和元素切换动画的实现 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
【Vue3 从入门到实战 进阶式掌握完整知识体系】022-Vue中的动画：列表动画
訾博（ZiBo）的博客
06-29 149
文章目录4、列表动画代码运行结果让其他列表项“温柔地”后移运行结果 4、列表动画 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, init
【Vue3 从入门到实战 进阶式掌握完整知识体系】025-Vue中的高级语法：自定义vue指令
訾博（ZiBo）的博客
06-30 307
文章目录2、自定义vue指令使用ref获焦点运行结果自定义指令实现获取焦点运行结果局部自定义指令运行结果说明带属性值的自定义指令运行结果修改数据并使数据生效运行结果简写自定义指令的属性运行结果优化上面的距离设置运行结果 2、自定义vue指令 使用ref获焦点 可以通过 ref 获得 DOM ，然后操作 DOM 实现获取焦点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
Vue 3 学习指南：从入门到精通
JDspirt的博客
05-18 1726
。
[Vue] 29.混入与自定义指令：Mixin混入的基础语法（2）
u014627255的博客
07-03 184
Vue mixin基础语法
Vue中mixins混入基础概念
miaomiao博客
06-22 737
mixins混入实际意义： mixins 是vue.js的一个选项，接受一个混入对象的数组 意义：将组件的选项抽离出去，单独管理，复用 有两种使用形式 局部混入 全局混入 局部混入 <html>//html示例代码块 <div id="app"> <button @click="add">add</button> ...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值