Vue2进阶之Vue2高级用法

mixin

示例一

App.vue

<template>
  <div id="app">
  </div>
</template>

<script>
const mixin2={
     
  created(){
     
    console.log("mixin created");
  }
}


export default {
     
  name: 'App',
  mixins:[mixin2],
  data(){
     
    return {
     
      message:"inner Hello world"
    }
  },
  created(){
     
    console.log("inner created");
  }
}
</script>

<style>
</style>

main.js

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

const mixin1={
   
  created:function(){
   
    console.log("global created");
    console.log("message",this.$data.message);
  }
}

Vue.mixin(mixin1)

new Vue({
   
  render: h => h(App),
}).$mount('#app')

示例二

App.vue

<template>
  <div id="app">
  </div>
</template>

<script>
const mixin2={
     
  created(){
     
    // console.log("mixin created");
  },
  data(){
     
    return {
     
      message:"mixin message"
    }
  }
}


export default {
     
  name: 'App',
  mixins:[mixin2],
  data(){
     
    return {
     
      message:"inner message"
    }
  },
  created(){
     
    // console.log("inner created");
  }
}
</script>

<style>
</style>

main.js