Shulou(Shulou.com)06/01 Report--

This article is about how to use Mixins in vue. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Use Mixins

Mixins can be used in two scenarios:

Use it to extract the common code within the component to enhance code reuse, not in the global, it is best to use it within the component or in the page.

Use it to separate function points, sometimes encounter a situation, that is, a lot of business functions lead to a large number of lines of Vue files written, resulting in code is difficult to maintain, function point code is difficult to track. You can make this huge Vue file easier to maintain by extracting functional code.

First write a public mixin file with high reuse status and functions in it.

Export default class CommonMixins extends Vue {public paginations = {pageSize: 20, total: 0, currentPage: 1,} handleChangePageSize (pageSize: number, cb: Function) {this.paginations.pageSize = pageSize; cb ();} handleChangePageNum (currentPage: number, cb: Function) {this.paginations.currentPage = currentPage; cb ();}}

Vue-property-decorator provides a decorator for Mixins. To introduce Mixin into a business page, you only need to pass in Mixins, and you can pass more than one, which means mixing multiple Mixin.

Import {Component, Mixins} from 'vue-property-decorator';import CommonMixins from ". / common-mixin"; import PermissionMixins from ". / permission-mixin"; @ Component ({}) export default class Parent extends Mixins (CommonMixins, PermissionMixins) {}

If you only need one, you can inherit it directly.

Import {Component, Mixins} from 'vue-property-decorator';import CommonMixins from ". / common-mixin"; @ Component ({}) export default class Parent extends CommonMixins {}

When we encounter a page with many function points and a large amount of code, we can use Mixin to extract some function points and manage these functions through files, which will be more convenient to manage the code.

Thank you for reading! This is the end of this article on "how to use Mixins in vue". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.