Vue mixed writing method

Vue mixing is a way of reusing code provided by Vue. It allows you to define a set of options and then share those options across multiple components. One of the common uses of Vue mixins is to add computed properties, methods, and reactive data that components require. In this article, we will introduce the basic concepts and common usage of Vue mixins, and provide practical examples and code.

1. Basic concepts

Vue mixin is actually a JavaScript object, which can contain any Vue component options. Typically, mixins define some commonly used computed properties, methods, and data, and multiple components can share these options.

When you apply a mixin object to a component, the options in the mixin object are merged into the options in the component. If both the mixin and the component define the same options, the component's options override the mixin's options.

2. Basic usage

The following is a simple mix-in example, which defines a calculated property and a method:

const myMixin = {
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  },
  methods: {
    sayHello() {
      alert("Hello, " + this.fullName + "!")
    }
  }
}

In this mix-in object, we define A computed property fullName that concatenates firstName and lastName. A method sayHello is also defined, which when called, will pop up a greeting box using fullName.

Now, we can apply this mixin object to a Vue component. Please see the following example:

Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      firstName: 'John',
      lastName: 'Doe'
    }
  }
  // other component options...
})

In this component definition, we mix myMixin into the component, and then define some component options, including two data options: firstName and lastName. Since we mixed in the fullName computed property and the sayHello method in myMixin, these two options will also be available in the component.

Now, we can use these options in this component:

<template>
  <div>
    <h1>{{ fullName }}</h1>
    <button @click="sayHello">Say Hello</button>
  </div>
</template>

This component will calculate the fullName based on firstName and lastName and display it on the page. When we click the "Say Hello" button, the sayHello method will be called, popping up a greeting box containing fullName.

3. Local mixing

Mixing can not only be applied to global components, but can also be mixed locally within components. Here is an example of a global mixin and a local mixin:

const myGlobalMixin = { // 全局混入
  // ...
}

const myLocalMixin = { // 局部混入
  // ...
}

Vue.component('my-component', {
  mixins: [myGlobalMixin, myLocalMixin],
  // ...
})

In this example, we first define a global mixin myGlobalMixin and then mix it in the component definition. At the same time, we also define a local mixin myLocalMixin and mix it into the component together with the global mixin. Local mixins have higher priority than global mixins, so if an option appears in both a local mixin and a global mixin, the option in the local mixin will be used.

4. Mixing Execution Sequence

When the same option exists in the mixing and the component, the mixed value will overwrite the original value in the component. However, the order in which different mixins and components are defined affects the final merge options. Normally, options in a mixin will be merged first and then with the component options, but if the mixin and component define the same options, the component options will be used first. An example is as follows:

const myMixin = {
  data() {
    return {
      message: 'Mixin Message'
    }
  }
}

Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      message: 'Component Message'
    }
  },
  created() {
    console.log(this.message);
  }
})

In this example, we define a myMixin mixin, in which we define a data option, which contains a message attribute. Then we mix myMixin into the my-component component and define an identical data option in the component. When this component is created, it will print "Component Message". Because the message attribute defined in the component has a higher priority than the attribute in the mix.

If you want the mixin options to be preserved in the mixin object and component options, use the Vue.extend() function to create the mixin object. This will represent a new extended Vue constructor whose options will be retained across all component instances. The example is as follows:

const myMixin = Vue.extend({
  data() {
    return {
      message: 'Mixin Message'
    }
  }
})

Vue.component('my-component', {
  mixins: [myMixin],
  data() {
    return {
      message: 'Component Message'
    }
  },
  created() {
    console.log(this.message);
  }
})

In this example, we use the Vue.extend() function to create the mixed object myMixin, which contains a data option in which the message attribute is defined. Then we mix myMixin into the my-component component and define the same data option in this component. When this component is created, it will print "Mixin Message". Because properties defined in the extended Vue constructor have higher priority than properties defined in the component.

5. Summary

Vue hybrid is a convenient way to reuse code, providing sharing options for multiple components to improve code reusability. Mixins can be used globally and locally. Using mixins in Vue is one of the best options to quickly implement functions and improve code reusability. However, you need to pay attention to the priority and merge order of mixin options to ensure that your code works as expected. In actual development, we can first define a mix-in object as needed, and then mix it into the components that need to share the mix-in object, thereby achieving code reuse.

The above is the detailed content of Vue mixed writing method. For more information, please follow other related articles on the PHP Chinese website!