Vue mixin混入

最新推荐文章于 2024-09-20 15:35:39 发布

小楼昨夜那事

最新推荐文章于 2024-09-20 15:35:39 发布

阅读量149

点赞数

分类专栏： Vue框架文章标签： vue vue.js

本文链接：https://blog.csdn.net/T_ambition/article/details/109012639

版权

Vue框架专栏收录该内容

15 篇文章 0 订阅

订阅专栏

基础

混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

首先定义混入对象，再将混入对象挂载到自定义组件上，从而实现Vue组件中的复用功能

<body>
  <div id="app">
    <home></home>
  </div>
</body>
<script>
// 定义混入对象
const mixin1 = {
  data () {
    return {
      msg1: "混入的数据1"
    }
  },
  methods: {
    changeMsg1 () {
      this.msg1 = "改变的数据1"
    }
  }
}
const mixin2 = {
  data () {
    return {
      msg2: "混入的数据2"
    }
  },
  methods: {
    changeMsg2 () {
      this.msg2 = "改变的数据2"
    }
  }
}
// 自定义组件Home
const Home = {
  template: `
    <div>
      Home组件
      <br><br>
      <button @click="changeMsg">改变msg</button>
      {{msg}}
      <br><br>
      <button @click="changeMsg1">改变msg1</button>
      {{msg1}}
      <br><br>
      <button @click="changeMsg2">改变msg2</button>
      {{msg2}}
    </div>
  `,
  data () {
    return {
      msg: "Home自己的数据"
    }
  },
  mixins: [mixin1,mixin2],
  methods: {
    changeMsg () {
      this.msg = "改变的Home数据"
    }
   }
}
Vue.component("home",Home);
// 定义实例
const vm = new Vue({
  el: "#app",
  data: {

  }
})
</script>

运行后，点击按钮会实现方法