混入是在多个位置需要使用相同的代码,把相同的代码抽离出来,作为共享代码。

  1. 功能:可以把多个组件共用的配置提取成一个混入对象
  2. 使用方式:
    第一步定义混合:
    1. {
    2. data(){....},
    3. methods:{....}
    4. ....
    5. }

    第二步使用混入:
    全局混入:Vue.mixin(xxx)
    局部混入:mixins:['xxx']

    代码演示

    Student.vue

    在 vue 文件中应用混入,属于局部引用,那个 vue 文件需要使用就引用即可 ```vue
``` ### School.vue 如果`data`中有已混合的属性,那页面上展现的是`data`里的属性值 ```vue ``` ### App.vue ```vue
  1. <a name="esEeb"></a>
  2. ### main.js
  3. 在 main.js 中配置 `Vue.mixin(hunhe)``Vue.mixin(hunhe2)`表示全局混合,所有的 vc 和 vm 都会用到混合里的属性和功能。
  4. ```javascript
  5. //引入Vue
  6. import Vue from 'vue'
  7. //引入App
  8. import App from './App.vue'
  9. import {hunhe,hunhe2} from './mixin'
  10. //关闭Vue的生产提示
  11. Vue.config.productionTip = false
  12. Vue.mixin(hunhe)
  13. Vue.mixin(hunhe2)
  14. //创建vm
  15. new Vue({
  16. el:'#app',
  17. render: h => h(App)
  18. })

mixin.js

export const hunhe = {
    methods: {
        showName(){
            alert(this.name)
        }
    },
    mounted() {
        console.log('你好啊!')
    },
}
export const hunhe2 = {
    data() {
        return {
            x:100,
            y:200
        }
    },
}

演示效果

chrome-capture-2022-4-31.gif