首页 > 其他分享 >Vue学习笔记44--mixin混入

Vue学习笔记44--mixin混入

时间:2024-03-11 15:48:52浏览次数:29  
标签:Vue name -- 44 vue mixin 组件 import App

mixin混入:可以理解为是代码的一种重构复用

一个混入对象可以包含任意组件选项(如data、methods、mounted等等)。当组件使用混入对象时,所有混入对象的选项将被“混合”进入该组件本身的选项。

示例一:局部混合示例

局部混入就是在单独的vue组件中引入了mixin混入对象

 Student.vue

<!-- 组件的结构 -->
<template>
  <div class="demo">
    <h3 @click="showName">学生姓名:{{name}}</h3>
    <h3>学生性别:{{ stuAge }}</h3>
  </div>
</template>
<!-- 组件交互相关的代码(数据、方法等) -->
<script>
// eslint-disable-next-line no-unused-vars
import { mixin } from '../mixin.js'  //引入混合
export default ({
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Student',
  data () {
    return {
      msg: '我正在学习 Vue',
      name: '心仪',
      stuAge: 6
    }
  },
  // methods: {
  //   showName () {
  //     alert(this.name)
  //   }
  // }

})
</script>

<!-- 组件的样式 -->
<style>
.demo {
  background-color: burlywood;
}
</style>

School.vue

<!-- 组件的结构 -->
<template>
  <div class="demo">
    <h3 @click="showName">学校姓名:{{name}}</h3>
    <h3>学校地址:{{ schoolAddress }}</h3>
  </div>
</template>
<!-- 组件交互相关的代码(数据、方法等) -->
<script>
// eslint-disable-next-line no-unused-vars
import { mixin } from '../mixin.js'  //引入混合
export default ({
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Student',
  data () {
    return {
      msg: '我正在学习 Vue',
      name: '高新一小',
      schoolAddress: '西安/高新一小'
    }
  },
  // methods: {
  //   showName () {
  //     alert(this.name)
  //   }
  // }

})
</script>

<!-- 组件的样式 -->
<style>
.demo {
  background-color: burlywood;
}
</style>

重构的复用代码:pub.js

// eslint-disable-next-line no-unused-vars
export const mixin = {
  methods: {
    showName () {
      alert(this.name)
    }
  }
}

App.vue

<template>
  <div>
    <!-- <img src="./assets/logo.png"> -->

    <Student></Student>
    <hr>
    <School></School>

  </div>
</template>

<script>
// 引入组件
import Student from './components/Student.vue';
import School from './components/School.vue';
export default {
  name: 'App',
  components: {
    Student,
    School
  },
}
</script>

<style>
</style>

main.js  

/* 
该文件是整个项目的入口文件 
*/

// 引入Vue
import { createApp } from 'vue'
// 引入App组件,其是所有组件的父组件
import App from './App.vue'
// new Vue({
//   render: h => h(App),
// }).$mount('#app')
// 创建实例对象vm 并将App组件放入容器中——等价于 上面代码
createApp(App).mount('#app')

示例二:全局混合示例

混入也可以进行全局注册(慎用)。一旦使用全局混入,它将影响每一个之后创建的 Vue 实例。使用恰当时,这可以用来为自定义选项注入处理逻辑。

全局混入我们只需要把mixin.js引入到main.js中,然后将mixin放入到Vue.mixin()方法中即可;

第一步:

注释掉个个组件中的独立引用:类似// import { mixin } from '../mixin.js'  //引入混合

第二步:main.js引入混合

// 引入Vue
import { createApp } from 'vue'
// 引入App组件,其是所有组件的父组件
import App from './App.vue'

import { mixin } from './mixin.js';
createApp(App).mount('#app').mixin(mixin)

// new Vue({
//   render: h => h(App),
// }).$mount('#app')
// 创建实例对象vm 并将App组件放入容器中——等价于 上面代码
createApp(App).mount('#app')

总结:

功能:可以把多个组件共用的配置提取成一个混入对象

使用方式:

第一步:定义混合,例如

export const mixin = {
  methods: {
    showName () {
      alert(this.name)
    }
  }
}

第二步:使用混合,例如

局部引用: mixins:['xxx']   // import { mixin } from '../mixin.js'  //引入混合    

全局引用:Vue.mixin(xxx)  

import { mixin } from './mixin.js';
createApp(App).mount('#app').mixin(mixin)

  

标签:Vue,name,--,44,vue,mixin,组件,import,App
From: https://www.cnblogs.com/YYkun/p/18065702

相关文章

  • 10 个解放双手的 IDEA插件,少些冤枉代码(第三弹)
    大家好,我是小富~好久没发这种实用贴了,最近用到了一些能提升工作效率的IDEA插件,给小伙伴们分享一下。相信我,我分享的这些插件,都是实实在在能解决实际开发场景中痛处的。以往的两篇IDEA插件分享:10个解放双手的IDEA插件,少些冤枉代码10个解放双手的IDEA插件,这些代码真不用手写......
  • IO流
    FileFile是Java.io.包下的类,File类的对象用于代表当前操作系统的文件/文件夹。File类只能对文件本身进行操作,不能读写文件里面存储的数据。递归/***@authorPickle*@versionV1.0*@date2024/3/119:22*/publicclassdemo{privatestaticintlastBottl......
  • RabbitMQ调研
    Swarm集群上部署RabbitMQ镜像队列集群Authoredby付建钧##1.为什么使用RabbitMQ(1)解耦:实现了消费者与生产者之间的解耦(2)异步:将消息写入消息队列,非必要的业务逻辑以异步的方式运行,可以加快业务的相应速度(3)削峰:在高并发的业务场景下,消息队列可以使同步访问变为串行访问达到限......
  • 解决问题:HTTP 错误 500.19 - Internal Server Error 无法访问请求的页面,因为该页的相
      缺少AspNetCoreModuleV2模块,下载安装即可。ps:.netframework是可以直接发布,IIS指定就能正常访问的。但aspnetcore项目略有不同,要额外安装一个模块,如果没有安装,会报HTTP错误500.19-InternalServerError的错。1、官方版本地址:https://dotnet.microsoft.com/down......
  • redis自学(15)IO多路复用
     无论是阻塞IO还是非阻塞IO,用户应用在一阶段都需要调用recvfrom来获取数据,差别在于无数据时的处理方案: 如果调用recvfrom时,恰好没有数据,阻塞IO会使进程阻塞,非阻塞IO使CPU空转,都不能充分发挥CPU的作用。 如果调用recvfrom时,恰好有数据,则用户进程可以直接进入第二阶段,读取并......
  • 客户说|从4小时到15分钟,一次分布式数据库的丝滑体验
    文/识货运维总监瞿晟荣识货APP致力于为广大用户提供专业的网购决策指导,为喜欢追求性价比的网购朋友带来及时劲爆的运动、潮流、生活、时尚等网购优惠资讯,产品覆盖国内外主流购物商城。它提供了全球范围内的时尚品牌、潮流单品的信息,帮助用户发现和购买最新、最热、最具性价......
  • FREE RTOS学习随记
    最近开始学习实时操作系统提升知识面,刚好STM32的开发板附赠了FREERTOS的学习手册,就据此来学习吧,所谓RTOS,即Real-TimeOpreatingSystem,实时操作系统,这个系统最大的好处就是通过一系列的算法,实现了多任务的灵活切换。单片机本身是单核的,只能单条代码依序执行,所以这个实时也只是伪......
  • Python - PyCharm支持的4种Python Interpreter和配置方法
    原文地址https://blog.csdn.net/qq_41498261/article/details/109112331 1.VirtualenvEnvironment1.1VirtualenvEnvironment是什么?1.2如何使用VirtualenvEnvironment?1.2.1.Newenvironment1.2.2.Existingenvironment2.CondaEnvironment2.1CondaEnvironment是什么......
  • sql触发器
    触发器——添加语句如下:ALTERTRIGGER[dbo].[Sync_ProjectTriggerAdd]ON[dbo].[File_Project_Test]AFTERINSERTASBEGINSETNOCOUNTON; declare@sachint; select@sach=Synchfrominserted; if(@sach=1) begin--将WRP库中新增的项目数据插入到Middle库中INSE......
  • 860. 柠檬水找零c
    优先找10块,因为5块更重要。boollemonadeChange(int*bills,intbillsSize){intcash[21]={0};for(inti=0;i<billsSize;i++){if(bills[i]==5){cash[5]++;}elseif(bills[i]==10){cash[5]--;cash[10]++;......