vue mixins使用示例

混入 (mixins): 是一种分发 Vue 组件中可以复用功能灵活的方式。混入对象可以包含任意组件的选项。当组件使用混入对象的时候,所有混入对象的选项将被混入该组件本身的选项。
使用示例:
定义使用的mixins对象

export const HelloWorldMixin = {
  data() {
    return {
      count: 0,
    };
  },
  created() {
    console.log("created");
  },
  methods: {
    changeMsg() {
      this.count++;
    },
  },
};

引入使用

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="changeMsg">Change Message</button> {{ count }}
  </div>
</template>

<script>
import { HelloWorldMixin } from '@/minxins/HelloWorld.js'

export default {
  mixins: [HelloWorldMixin],
  name: 'HelloWorld',
  props: {
    msg: String
  },
  // data() {
  //   return {
  //     count: 0,
  //   };
  // },
  // methods: {
  //   changeMsg() {
  //     this.count++;
  //   },
  // },
}
</script>
<style scoped>
</style>

简单说就是将 data, methos 等直接拆分到 HelloWorldMixin.js中

文件目录
在这里插入图片描述

效果:
在这里插入图片描述

使用minxins和当前 vue中 data,methods 效果是一样的,
在单个文件vue内容代码量很大的时候, 进行提取meghods等, 只保留 样式,css
翻阅查找还是更方便些

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值