脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → Vue之mixin混入

Vue之mixin混入详解

 更新时间：2021年11月21日 11:33:56   作者：王同学要努力  
这篇文章主要为大家介绍了Vue之mixin混入，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助

 在这里插入图片描述

局部混入

<template>
  <div>
    <h2 @click="showName">学生姓名：{{name}}</h2>
    <h2>学生性别：{{sex}}</h2>
  </div>
</template>

<script>
  //引入一个混合
  import {
    hunhe,hunhe2
  } from '../mixin'
  export default {
    name: 'Student',
    data() {
      return {
        name: '张三',
        sex: '男'
      }
    },
    mixins: [hunhe,hunhe2]
  }

</script>


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

export const hunhe2 = {
    data() {
        return {
            x: 100,
            y: 200
        }
    }

}

全局混入

import { hunhe, hunhe2 } from './mixin'
Vue.mixin(hunhe)
Vue.mixin(hunhe2)

在这里插入图片描述

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注脚本之家的更多内容!

您可能感兴趣的文章:

相关文章

  • vue 实现上传组件

    vue 实现上传组件

    虽然前端UI框架大都提供文件上传的组件，以及很多插件可供选择，工作中可能不需要我们手写一个上传组件，但是从零封装组件对学习是很有助益的。下文为大家介绍使用Vue3+TypeScript实现的一个文件上传的功能，目前只实现上传等基本功能，后续会逐渐对功能进行扩展
    2021-05-05
  • 警告[vue-router] Duplicate named routes definition简单解决方法

    警告[vue-router] Duplicate named routes definition简单解决方法

    这篇文章主要关于介绍了警告[vue-router] Duplicate named routes definition的解决方法,这个错误提示是因为在Vue Router中定义了重复的路由名称,需要的朋友可以参考下
    2023-12-12
  • vue插值表达式和v-text指令的区别

    vue插值表达式和v-text指令的区别

    这篇文章主要介绍了vue插值表达式和v-text指令的区别，{{}}这种语法叫做插值表达式，在插值表达式中可以写任何合法的js表达式，下面来看看文章是怎么介绍该内容的吧,需要的朋友可以参考一下
    2021-11-11
  • Vue实现页面返回停留原位置的多种方案

    Vue实现页面返回停留原位置的多种方案

    文章主要讨论了在 Vue 开发中实现页面返回停留原位置的多种方案,包括 Vuex、keep-alive、v-show、客户端跳转等,并分别阐述了它们的优缺点和适用情况,强调开发前应周全考虑前端业务和用户体验,根据实际业务选择合适方案,需要的朋友可以参考下
    2025-03-03
  • Vue3中的defineExpose函数用法深入解析

    Vue3中的defineExpose函数用法深入解析

    这篇文章主要介绍了Vue3中的defineExpose函数用法的相关资料,defineExpose是Vue3中用于在模式下暴露组件内部属性和方法的辅助函数,它允许父组件通过ref访问子组件的暴露内容,提高组件间的交互能力并保持封装性,需要的朋友可以参考下
    2025-01-01
  • Vue绑定class和绑定内联样式的实现方法

    Vue绑定class和绑定内联样式的实现方法

    本文主要介绍了Vue绑定class和绑定内联样式的实现方法，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 用vue构建多页面应用的示例代码

    用vue构建多页面应用的示例代码

    这篇文章主要介绍了用vue构建多页面应用的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • vue DatePicker日期选择器时差8小时问题

    vue DatePicker日期选择器时差8小时问题

    这篇文章主要介绍了vue DatePicker日期选择器时差8小时问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2023-05-05
  • elementUI table如何给表头添加气泡显示

    elementUI table如何给表头添加气泡显示

    这篇文章主要介绍了elementUI table如何给表头添加气泡显示问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11
  • vue 指定组件缓存实例详解

    vue 指定组件缓存实例详解

    keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。这篇文章主要介绍了vue 指定组件缓存,需要的朋友可以参考下
    2018-04-04

最新评论