vue,mixin混入

mixins 选项接收一个混入对象的数组。这些混入对象可以像正常的实例对象一样包含实例选项，这些选项将会被合并到最终的选项中，使用的是和 Vue.extend() 一样的选项合并逻辑。也就是说，如果你的混入包含一个 created 钩子，而创建组件本身也有一个，那么两个函数都会被调用。

1. 功能：可以把多个组件共用的配置提取成一个混入对象

2. 使用方式：
   第一步定义混合：

   {
       data(){....},
       methods:{....}
       ....
   }
   

   第二步使用混入：

   ​ 全局混入：Vue.mixin(xxx)
   ​ 局部混入：mixins:['xxx']

注意：安装的vue-cli为v4以上的版本，其不包含全局的 Vue，Vue 被 createApp函数代替，也就是说在使用全局混入的时候就会报错。错误提示：Uncaught ReferenceError: Vue is not defined。那么我们可以引入Vue.js。比如下面这样：

下面我们可以看下代码：
Book1.vue

<template>
  <div class="demo1">
    <h1>《{{ bookName }}》</h1>
    <h2>作者:{{ author1 }}</h2>
    <h1>书籍里主要人物：</h1>
    <h2>{{ persona1 }}、{{ persona2 }}、{{ persona3 }}、{{ persona4 }}等等</h2>
    <h1>主要内容讲述的是：</h1>
    <h2>{{ msg }}</h2>
    <button @click="buyBook">喜欢就去买吧！</button>
    <button @click="showBook">这本书值得拥有</button>
  </div>
</template>

<script>
import {hunhe1,hunhe2} from '../mixin'
export default {
  name: "Book1",
  data() {
    return {
      bookName: "西游记",
      author1: "吴承恩",
      persona1: "孙悟空",
      persona2: "唐僧",
      persona3: "猪八戒",
      persona4: "沙和尚",
      msg: "唐僧、孙悟空、猪八戒、沙和尚师徒四人西天取经的故事。",
    };
  },
  mixins:[hunhe1,hunhe2],
  methods: {
    buyBook() {
      alert("你喜欢这本书吗？喜欢就去买吧！");
    },
  },
};
</script>

<style>
.demo1 {
  background-color: blue;
}
</style>

Book2.vue

<template>
  <div class="demo2">
    <h1>《{{ book2Name }}》</h1>
    <h2>作者:{{ author2 }}</h2>
    <h1>书籍里主要人物：</h1>
    <h2>{{ person1 }}、{{ person2 }}、{{ person3 }}、{{ person4 }}等等</h2>
    <h1>主要内容讲述的是：</h1>
    <h2>{{ msg }}</h2>
    <button @click="buyBook2">喜欢就去买吧！{{book2Name}}</button>
  </div>
</template>
                
                <script>
import { hunhe1, hunhe2 } from "@/mixin";
export default {
  data() {
    name: "Book2";
    return {
      book2Name: "三国演义",
      author2: "罗贯中",
      person1: "诸葛亮",
      person2: "刘备",
      person3: "曹操",
      person4: "关羽",
      msg: "这本书主要讲的是魏蜀吴三国争霸的故事",
    };
  },
  methods: {
    buyBook2() {
      //alert("你喜欢这本书吗？喜欢就去买吧！");
      alert(this.book2Name)
    },
  },
  mixins:[hunhe1,hunhe2]
};
</script>
                
                <style>
.demo2 {
  background-color: rgb(255, 0, 64);
}
</style>

App.vue

<template>
  <div>
    <Book1 />
    <hr />
    <Book2 />
  </div>
</template>

<script>
import Book1 from './components/Book1';
import Book2 from './components/Book2';
export default {
  name: "App",
  components: { Book1, Book2 },
};
</script>

main.js

import { createApp } from 'vue'

//引入Vue
/*
   安装的vue-cli为v4以上的版本，
   其不包含全局的 Vue，Vue 被 createApp函数代替
*/
import Vue from '../vue_js/vue'
import App from './App.vue'
import { hunhe1, hunhe2 } from './mixin'
//全局定义的mixin混入
Vue.mixin(hunhe1)
Vue.mixin(hunhe2)
createApp(App).mount('#app')

mixin.js

export const hunhe1 = {
                  methods: {
                                    showBook() {
                                                      alert("这是mixin混合")
                                    }
                  },
                  mounted() {
                                    console.log('这书是我国古代的名著')
                  },
}
export const hunhe2 = {
                  data() {
                                    return {
                                                      x: 100,
                                                      y: 200
                                    }
                  },
}