作用：代码复用

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    7.     <title>Document</title>
    8. </head>
    9. <body>
    10.     <div id='app'>
    11.         {{msg}}
    12.     </div>
    13.     <script src="./vue.js"></script>
    14.     <script>
    15.         const myMixin = {
    16.             data(){
    17.                 return {
    18.                     msg:"123"
    19.                 }
    20.             },
    21.             created(){
    22.                 this.sayHello();
    23.             },
    24.             methods: {
    25.                 sayHello() {
    26.                     console.log('hello mixin');
    27.                 }
    28.             },
    29.         }
    30.         // mixin来分发Vue组件中的可复用功能
    32.         new Vue({
    33.             el:"#app",
    34.             data:{
    35.                 msg:"mufeng"
    36.             },
    37.             created(){
    38.                 console.log(1111);
    40.             },
    41.             mixins:[myMixin]
    42.         })
    44.     </script>
    46. </body>
    47. </html>

    应用

    1. <!DOCTYPE html>
    2. <html lang="en">
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
    8.     <title>mixin的应用</title>
    9. </head>
    11. <body>
    12.     <div id='app'>
    14.     </div>
    15.     <script src="./vue.js"></script>
    16.     <script>
    17.         //    一个是模态框 一个提示框
    18.         // 它们看起来不一样，用法不一样，但是逻辑一样（切换boolean）
    19.         /* 
    20.         // 全局的mixin 要格外小心 因为每个组件实例创建是，它都会被调用
    21.         Vue.mixin({
    23.         })
    25.          */
    26.         const toggleShow = {
    27.             data() {
    28.                 return {
    29.                     isShow: false
    30.                 }
    31.             },
    32.             methods: {
    33.                 toggleShow() {
    34.                     this.isShow = !this.isShow
    35.                 }
    36.             }
    37.         }
    39.         const Modal = {
    40.             template: `
    41.                 <div v-if='isShow'><h3>模态框组件</h3></div>
    42.             `,
    43.             // 局部的mixin
    44.             mixins: [toggleShow]
    46.         }
    48.         const ToolTip = {
    49.             template: `
    50.             <div v-if='isShow'>
    51.                 <h2>提示框组件</h2>
    52.             </div>
    53.          `,
    54.             mixins: [toggleShow]
    55.         }
    56.         new Vue({
    57.             el: "#app",
    58.             data: {
    60.             },
    61.             components: {
    62.                 Modal,
    63.                 ToolTip
    64.             },
    65.             template: `
    66.                 <div>
    67.                     <button @click='handleModel'>模态框</button>
    68.                     <button @click='handleToolTip'>提示框</button>
    69.                     <Modal ref='modal'></Modal>
    70.                     <ToolTip ref='toolTip'></ToolTip>
    71.                 </div>
    72.             `,
    73.             methods: {
    74.                 handleModel() {
    75.                     this.$refs.modal.toggleShow();
    76.                 },
    77.                 handleToolTip() {
    78.                     this.$refs.toolTip.toggleShow();
    79.                 }
    80.             },
    81.         })
    82.     </script>
    84. </body>
    86. </html>