混入 mixins

就是在vue元件的風格不同（就是顯示的內容不一樣）同時在多個元件中有一些相同的屬性和方法顯然我們不能在每個元件裡面都寫一遍 我們需要那這些相同的內容提取出來 寫成一個公共的 那麼這個公共的檔案就叫mixins

區域性混入

建立混入檔案

let myMixins={
   data(){
     return {
       text:"呵呵"
     }
   },
 methods:{
     fun(){
       alert("你好")
     }
   },
   directives:{
     xiaoming:{
       inserted(el){
         el.style.backgroundColor="red"
       }
     }
   }
}
​
// 不要忘了暴露
export default myMixins
 

使用混入 用mixins屬性對應一個數組

<template>
  <div>
    demoa
     <button @click="fun()">點我彈出你好</button>
  </div>
</template>
​
<script>
import myMixins from "@/mixins"
export default {
//  使用混入
   mixins:[myMixins]
}
</script>
​
<style>
​
</style>

全域性混入

在任何元件中都可以使用 在main中引用 並且使用 import MinXin from '@/components/MinXins/index.js' Vue.mixin(MinXin);

在元件中即可隨意使用混入中的資料

本文來自部落格園，作者：{Teil}}，轉載請註明原文連結：https://www.cnblogs.com/user-001/p/15632664.html