mixin组件

Vue mixin组件使用教程

最新推荐文章于 2025-12-02 21:41:05 发布

原创最新推荐文章于 2025-12-02 21:41:05 发布 · 125 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

1 创建libs/MyUI/Button.vue

<template>
  <button :class="['my-btn', btnStyle]">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'MyBtn',
  props: {
    btnStyle: String
  }
}
</script>

<style lang="less" scoped>
.my-btn {
  height: 34px;
  padding: 0 15px;
  border: none;
  outline: none;
  background-color: #000;
  color: #fff;
}

.my-btn.btn-primary {
  background-color: blue;
  color: #fff;
}

.my-btn.btn-danger {
  background-color: red;
  color: #fff;
}

.my-btn.btn-success {
  background-color: green;
  color: #fff;
}

.my-btn.btn-warning {
  background-color: orangered;
  color: #fff;
}
</style>

2 同级创建index.js

import MyBtn from "./Button.vue"

export default {
  components: {
    MyBtn
  }
}

3 main.js中引入mixin

import MyUI from '@/libs/MyUI'
app.mixin(MyUI)

4 引入UI

<template>
  <div>mixin测试</div>
  <my-btn btnStyle="btn-danger">测试</my-btn>
</template>
<script>
// import MyUI from '@/libs/MyUI'  单个组件中使用
export default {
  name: 'mixinTest',
  // mixins: [MyUI]
}
</script>

<style lang="less" scoped></style>