Vue 中的 mixin 混入(合)

阿新 • • 發佈：2022-12-04

Vue 中的 mixin 混入(合)

1：說明

/*
## mixin(混入)

1. 功能：可以把多個元件共用的配置提取成一個混入物件

2. 使用方式：

    第一步定義混合：

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

    第二步使用混入：

    	全域性混入：```Vue.mixin(xxx)```
    	區域性混入：```mixins:['xxx']	```



*/

2：程式碼結構

3：程式碼內容

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave:false /*關閉語法檢查*/
})

main.js

 //引入Vue
import Vue from 'vue'
//引入App
import App from './App.vue'
//關閉Vue生產提示
Vue.config.productionTip=false;
 //全域性引用 minix
 import { mixinGlobalData ,mininGlobalData2} from "@/mixin 
";
 Vue.mixin(mixinGlobalData);
 Vue.mixin(mininGlobalData2);


// 建立Vm
const vm = new Vue(  {
        el:'#app',
        render: (h) => h(App)
   });

index.html

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <!-- 針對ie瀏覽器的一個特殊配置，含義是讓ie瀏覽器以最高的渲染級別進行渲染介面 --> 

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 開啟移動端理想視口 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <!-- 配置頁籤的圖示 -->
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <!-- 配置網頁的標題：找 package.json檔案裡的 "name": "vue_test" 值 -->
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <!-- 如果瀏覽器不支援js，則該標籤的元素裡的內容將會被渲染 -->
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <!-- 容器 -->
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

App.vue

 <!--

 -->

<template>
  <div>
    <hr/>
    <div class="divCss">
        <h1 class="h1Css">Vue中的 minix屬性</h1>
        <hr/>
        <!-- 呼叫元件，傳遞資料 -->
        <School/>
        <hr/>
        <Student />
        <hr/>

    </div>

  </div>
</template>
<script>

    import School from './components/School.vue';
    import Student from './components/Student.vue';


    export default {
        name:'App',
        components:{
            Student,
            School
        },
    }
</script>

<style>
   .divCss{
        background-color: chocolate;
        margin: auto;
        padding: 20px;
   }
   .h1Css{
        font-size: 36px;
        color: white;
   }
</style>

Student.vue

<!--

 -->
<template>
    <div  class="schoolClassStyle">
      <h1  style="color:red">{{msg}}</h1>
      <h2 @click="showName">學生名稱：{{name}}</h2>
      <h2>學生性別：{{sex}}</h2>
    </div>
</template>
  <script>
      //引入一個混合 mixin
      import { mixin,mixinData } from '@/mixin';
      export default {
        name:'Student',
        data () {
          return {
            msg:'學生資訊',
            name:'向北',
            sex:'男'
          }
        },
        //配置混合物件，可以配置多個
        mixins:[mixin,mixinData]

      }
  </script>
  <style>
    .schoolClassStyle{
      background-color: aquamarine;
    }
  </style>

School.vue

<!--

 -->
<template>
    <div  class="schoolClassStyle">
      <h1  style="color:red">{{msg}}</h1>
      <h2 @click="showName">學校名稱：{{name}}</h2>
      <h2>學校地址：{{address}}</h2>
    </div>
</template>
  <script>
      //引入一個混合 mixin
      import { mixin ,mixinData} from '@/mixin';
      export default {
        name:'School',
        data () {
          return {
            msg:'學校資訊',
            name:'華南',
            address:'廣州市天河區中山大道西55號'
          }
        },
        //配置混合物件，可以配置多個
        mixins:[mixin,mixinData]

      }
  </script>
  <style>
    .schoolClassStyle{
      background-color: aquamarine;
    }
  </style>

minix.js


 export  const mixin ={
    methods: {
        showName(){
          alert(this.name);
        }
      },

}

export const mixinData={
    data () {
        return {
            x:100,
            y:100
        }
    }
}


export const mixinGlobalData={
    data () {
        return {
            g_x:100,
            g_y:100
        }
    }
}

export const mininGlobalData2={
    data () {
        return {
            g_m:100,
            g_n:100
        }
    }
}