0


Vue|mixin混入

目录

在 Vue 中,混入(Mixins)是一种灵活的分发功能,可以将可复用的代码片段和功能注入到多个组件中。简单来说,混入允许你在多个组件之间共享逻辑,而无需重复代码。

主要特点:

  1. 代码复用:混入可以包含数据、计算属性、方法和生命周期钩子等,可以在多个组件中复用,减少代码冗余。
  2. 合并机制:当组件和混入中存在同名属性或方法时,组件的优先级高于混入。混入的内容会被合并到组件的选项中。
  3. 灵活性:可以在需要的地方选择性地使用混入,而不必在每个组件中都定义相同的逻辑。

mixin混入

什么是mixin

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

代码准备

在components目录下创建两个vue文件,分别为

  1. Company.vue

  1. Staff.vue

。代码块如下:

  • Company.vue
  1. <template><div><h1 @click="alertName">公司名称:{{ name }}</h1><h1>地址:{{ address }}</h1></div></template><script>exportdefault{
  2. name:"Company",data(){return{
  3. name:"橘猫科技有限公司",
  4. address:"橘猫街道",};},
  5. methods:{alertName(){alert(this.name);},},};</script>
  • Staff.vue
  1. <template><div><h1 @click="alertName">用户名:{{ name }}</h1><h1>性别:{{ sex }}</h1></div></template><script>exportdefault{
  2. name:"Staff",data(){return{
  3. name:"摔跤猫子",
  4. sex:"男",};},
  5. methods:{alertName(){alert(this.name);},},};</script>

两个vue文件分别展示【员工信息】与【公司信息】,当点击员工名称与公司名称时都会将名称进行弹出显示;在App.vue中引入这两个vue文件并通过终端执行命令运行。

  • App.vue
  1. <!-- 结构 --><template><StaffVue/><CompanyVue/></template><!-- 交互 --><script>importStaffVue from './components/Staff.vue'importCompanyVue from './components/Company.vue'exportdefault{
  2. name:'App',
  3. components:{StaffVue,CompanyVue},}</script><!-- 样式 --><style>
  4. #app {-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
  5. text-align: center;
  6. color: #2c3e50;
  7. margin-top:60px;}</style>

控制台出现了报错

  1. 10:9 error Component name "Company" should always be multi-word vue/multi-word-component-names

,10:9错误组件名称“Company”应始终为多字vue/多字组件名称

在这里插入图片描述

这个报错的原因是在组件命名的时候未按照 ESLint 的官方代码规范进行命名,根据 ESLint 官方代码风格指南,除了根组件(App.vue)以外,其他自定义组件命名要使用大驼峰命名方式或者用“-”连接单词进行命名;解决方案如下:

  • 找到vue.config.js文件
  • 添加 lintOnSave: false配置下,关闭eslint校验
  • 重新启动项目

在这里插入图片描述

项目启动后,页面点击交互效果如下:


在这里插入图片描述

如何混入?

通过对比

  1. Staff.vue

以及

  1. Company.vue

发现两个组件中有很多代码是一致的,这时候就可以把这两段代码分别删除,并且创建一个新的文件分别在各自的组件进行引用,这样就达到了混入的效果,所谓的混入就是多个组件共享混用一个配置。

在这里插入图片描述

在src目录下新建一个

  1. mixin_alertName.js

的文件,这里叫什么名字都可以。

在这里插入图片描述

再把两个vue组件中的methods代码删掉

在这里插入图片描述

在这里插入图片描述

  • mixin_alertName.js中代码如下:
  1. exportconst mixin_name ={
  2. methods:{alertName(){alert(this.name);}}};

在需要用到该组件的vue文件中进行引入,

  1. form

后填写该文件目录位置,

  1. mixin_name

为混合组件中定义的名称,需保持一致。

在这里插入图片描述

如何应用这个混合呢?这里需要通过一个全新的配置项:

  1. mixins

,相比

  1. mixin

来说多了一个s,这里代表可以应用多个混合组件,它的值是一个数组。

在这里插入图片描述

将混合组件名称填入数组,在另外一个vue文件中也按上述步骤引入即可。

在这里插入图片描述

  • 保存文件后刷新页面,检查控制台是否有报错信息,点击用户名称及公司名称,即可发现使用混入组件与每个组件分别的定义效果一致。在这里插入图片描述

  1. mixin_alertName.js

中定义一个钩子函数,输出

  1. hello,我被调用了

,可以在控制台中看到输出了两次,可以看出混合就是复用配置。

在这里插入图片描述
在这里插入图片描述

继续在

  1. mixin_alertName.js

中增加一段,在这里不配置方法,只配置数据,同时在多个vue组件中进行引入。

在这里插入图片描述

  1. //增加一个mixin_name2,在此处不配置方法,只配置数据exportconst mixin_name2 ={data(){return{
  2. height:180,
  3. balance:100}}};
  • Staff.vue文件

在这里插入图片描述

打开浏览器,通过插件查看数据,可以看到在

  1. Staff.vue

中只写了

  1. name

  1. sex

,但是还是出现了

  1. height

  1. balance

,这是因为它将当前组件的数据以及引入组件的数据进行了一个整合,组合在一起展示。

在这里插入图片描述

如果在

  1. Staff.vue

中也存在

  1. height

  1. balance

两个字段的话,则以

  1. Staff.vue

为主。

在这里插入图片描述

在这里插入图片描述

如果在

  1. Staff.vue

以及

  1. mixin_alertName.js

中同时定义

  1. mounted

钩子函数,这时没有优先级,两者都会保留。

在这里插入图片描述
在这里插入图片描述

全局混合

上述步骤中,在每个组件中单独配置、单独引用的方式数据局部混合,什么页面用到了就得这么来一套。

在这里插入图片描述

这里介绍如何实现全局混合,首先在

  1. main.js

中引入

  1. mixin_alertName.js

,在创建Vue应用时,使用

  1. app.mixin

方法添加全局混入,此时应与上述步骤中的局部混入效果一致,但是在每个vue组件中,已不再重复单独引用。

  • Staff.vue以及Company.vue

在这里插入图片描述

  • main.js
  1. import{ createApp } from 'vue';importApp from './App.vue';import{ mixin_name, mixin_name2 } from './mixin_alertName';//创建Vue的实例对象->vmconst app =createApp(App);// 全局混入
  2. app.mixin(mixin_name);
  3. app.mixin(mixin_name2);
  4. app.mount('#app');

在这里插入图片描述

标签: vue.js javascript vue

本文转载自: https://blog.csdn.net/weixin_42794881/article/details/142335523
版权归原作者 摔跤猫子 所有, 如有侵权,请联系我们删除。

“Vue|mixin混入”的评论:

还没有评论