【Vue2.0】—mixin混入 (十五)

简介: 【Vue2.0】—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)


相关文章
|
22天前
|
JavaScript
VUE组件:Vue中的mixin是什么?有哪些注意事项?
VUE组件:Vue中的mixin是什么?有哪些注意事项?
47 5
|
22天前
|
JavaScript 开发者
vue 中 mixin 和 mixins 区别
vue 中 mixin 和 mixins 区别
48 0
|
22天前
|
设计模式 JavaScript 开发者
Vue的混入(Mixins):混入的使用和设计模式解析
【4月更文挑战第24天】Vue Mixins是实现组件复用的灵活工具,允许共享可复用功能。混入对象包含组件选项,如数据、方法和生命周期钩子,可被合并到使用它的组件中。通过组合模式和钩子注入模式,混入能提高代码复用和可维护性。然而,注意命名冲突、选项合并策略以及慎用全局混入以防止副作用。正确使用混入能提升开发效率和软件质量。
|
22天前
|
JavaScript 前端开发
Vue中mixins的作用是什么?有什么注意事项?
Vue中mixins的作用是什么?有什么注意事项?
28 3
|
22天前
|
JavaScript 小程序 前端开发
vue中的mixins混入使用方法
vue中的mixins混入使用方法
|
22天前
【Vue2.0学习】—mixin混入(五十五)
【Vue2.0学习】—mixin混入(五十五)
【Vue2.0学习】—mixin混入(五十五)
|
10月前
|
JavaScript
|
12月前
|
JavaScript 开发者
Vue(Vue2+Vue3)——26.组件的嵌套、27.VueComponent构造函数
Vue(Vue2+Vue3)——26.组件的嵌套、27.VueComponent构造函数
|
JavaScript
vue中使用 mixins (混入)的使用
vue中使用 mixins (混入)的使用
|
JavaScript API
vue3学习笔记(Mixin混入)
vue3学习笔记(Mixin混入)
379 0