华域联盟 JavaScript Vue之mixin混入详解

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之mixin混入详解

转载请保留出处和原文链接:https://www.cnhackhy.com/147322.htm

本文来自网络,不代表华域联盟立场,转载请注明出处。

作者: sterben

发表评论

联系我们

联系我们

2551209778

在线咨询: QQ交谈

邮箱: admin@cnhackhy.com

工作时间:周一至周五,9:00-17:30,节假日休息

关注微信
微信扫一扫关注我们

微信扫一扫关注我们