Vue.js 混合

Mixins – Mixins 用于重用执行相同操作的 Vue 组件中的代码。 Mixin 类似于 C 编程中的函数。我们可以在 mixins 中定义一些动作，并在需要的地方使用它。在 mixins 的帮助下，代码的可重用性很简单。

Vue 中有两种类型的 mixin：-

1. Local Mixins –本地 mixins 仅在我们在 Vue 组件中使用 mixin 对象时起作用。在这里，我们将使用本地 mixins。

句法 ：

const MixinObjectName = {
    methods: {
        // you can write your methods here
    }
}

2. 全局 Mixins——如果我们需要 Vue 中的所有组件都具有相同的功能，我们可以使用全局 mixins。全局 mixins 影响每个 Vue 组件。

全局 mixin 的一个小例子：

// Creating global mixin
Vue.mixin({
  created: function () {
    var example = this.$options.example
    if (example) {
      console.log(example)
    }
  }
})

new Vue({
  example: 'This is Vue!!'
})

Output: This is Vue!!

先决条件：

• Vue Js

方法：首先，我们将创建一个没有 mixin 的 Simple Vue.js 应用程序，它会在按钮单击时显示警报。

Vue 应用程序：

HTML

  

    Mixins

  

    
        
            {{ message }}
        
  
        
  
        
        
        
        
  
    
    
  
    
        // Creating component 1
        const myComp1 = {
            template: 
`<div><button @click="pressed('Button 1 is pressed')">Button 1</button> </div>`,
  
            // Creating method which shows 
            // alert on button click
            methods: {
                pressed(val) {
                    alert(val);
                }
            }
        }
  
        // Creating component 2  
        const myComp2 = {
            template: 
`<div><button @click="pressed('Button 2 is pressed')">Button 2</button></div>`,
  
            // Creating method which shows alert on button click
            methods: {
                pressed(val) {
                    alert(val);
                }
            }
        }
  
        // Creating vue app 
        new Vue({
            el: '#app',
            data() {
                return {
                    message: 'Geeks for Geeks Vue.js | Mixins !!!'
                }
            },
  
            // Defining components
            components: {
                myComp1: myComp1,
                myComp2: myComp2
            }
        });
    

  

在上面的代码中，组件 1 和组件 2 执行相同的函数（警报消息）。我们为这两个组件编写了单独的函数。所以现在我们可以创建 mixins 并在不同的组件中重用相同的函数。

为我们的应用创建 Mixin：

const Mixin = {
    methods: {
    
    //creating method which shows alert on button click
    
    pressed(val){
        alert(val);
    }
 }
}

在上面的代码中，我们为 mixins 创建了一个对象为Mixin ，并在其中定义了我们的函数。所以现在我们可以在我们的组件中使用这个 Mixin 对象了。

将 mixin 添加到现有代码中：

HTML

  

    Mixins

  

    
        
            {{ message }}
        
  
        
        
        
        
        
    
    
  
    
        // Creating mixin 
        const Mixin = {
  
            // Creating method which shows 
            // alert on button click
            methods: {
                pressed(val) {
                    alert(val);
                }
            }
        }
  
        // Creating component 1
        const myComp1 = {
            template: 
`<div><button @click="pressed('Button 1 is pressed')">Button 1</button> </div>`,
  
            // Using mixin in component 1
            mixins: [Mixin]
        }
  
        // Creating component 2
        const myComp2 = {
            template: 
`<div><button @click="pressed('Button 2 is pressed')">Button 2</button></div>`,
  
            // Using mixin in component 2
            mixins: [Mixin]
        }
  
        // Creating vue app
        new Vue({
            el: '#app',
            data() {
                return {
                    message: 
                    'Geeks for Geeks Vue.js | Mixins !!!'
                }
            },
  
            // Defining components 
            components: {
                myComp1: myComp1,
                myComp2: myComp2
            }
        });
    

  

输出：

点击按钮之前：

Vue 应用程序

单击按钮 1 时。

按钮 1 单击

单击按钮 2 时。

按钮 2 单击