Shulou(Shulou.com)05/31 Report--

This article mainly introduces the method of vue mapping and how to mix the use of related knowledge, the content is detailed and easy to understand, the operation is simple and fast, with a certain reference value, I believe that you read this vue mapping method and how to mix into the use of the article will have a harvest, let's take a look.

Vue Mapping method and blending content Encapsulation in v-select

Scenario: when you use some select "content" together in different components, you can encapsulate the content in a file.

1.cig2.0/src/contants.js

Export const data = {whether: [/ / Yes / No {value: 1, label: "Yes"}, {value: 0, label: "No"}], hour: [{value: "0", label: "0"}, {value: "1", label: "1"}, {value: "2", label: "2"}, {value: "3", label: "3"} {value: "4", label: "4"}, {value: "5", label: "5"}, {value: "6", label: "6"}, {value: "7", label: "7"}, {value: "8", label: "8"}, {value: "9", label: "9"}, {value: "10" Label: "10", {value: "11", label: "11"}, {value: "12", label: "12"}, {value: "13", label: "13"}, {value: "14", label: "14"}, {value: "15", label: "15"}, {value: "16", label: "16"} {value: "17", label: "17"}, {value: "18", label: "18"}, {value: "19", label: "19"}, {value: "20", label: "20"}, {value: "21", label: "21"}, {value: "22", label: "22"}, {value: "23" Label: "23"}], / / minute minute: [{value: "0", label: "0"}, {value: "30", label: "30"}],} Export function getValues (key) {/ / debugger return JSON.parse (JSON.stringify (data [key] | | []));}

two。 Introduce [blending] into components that need to use select

Returns the contents of the encapsulated select in the mix file where select is used in the component

Introduce blending:

Import MixSearch from "@ / mixins/mix-search.js"; let mixSearch = MixSearch (); / / because export default is a function () mixins in the mix-search.js file: [mixSearch] import {getValues} from "@ / contants.js" let cache = {} function saveCache (key, value) {if (! key) return If (value) {cache [key] = JSON.stringify (value)} else {if (! cache [key]) return return JSON.parse (cache [key])}} export default function (ext) {ext = ext | {} let mixin = {data () {return {fullscreenLoading: false PageBean: {pageSize: 10, page: 1, showTotal: true}, searchModel: JSON.parse (JSON.stringify (ext))}}, methods: {async payload (fn) Fail) {try {this.fullscreenLoading = true Await fn ()} catch (e) {console.error (e)} this.fullscreenLoading = false }, getKeyValues (key, opt) {return getValues (key, opt)}, / / Mapping fields getSelectLabel (type, id) {for (let I = 0; I < type.length) Type +) {if (type [I] .value = = id) {return type [I] .label}, created () {let {pageBean SearchModel} = saveCache (this.$options.name) | | {} if (pageBean) {this.pageBean = pageBean This.searchModel = searchModel }}, beforeDestroy () {saveCache (this.$options.name, {pageBean: this.pageBean) SearchModel: this.searchModel})}} return mixin} Simple usage of sub-vue blending

Vue's official documentation: mixin provides a very flexible way to distribute reusable functionality in Vue components. A blended object can contain any component option. When a component uses a blending object, all options that blend into the object are "blended" into the component's own options.

The simple understanding is that it can make a reusable function that can be reused in various components, and this mixin function can use any component option in the vue component, such as data,method,watch, and each lifecycle function. When you reference a component that needs to be used, it is equivalent to merging the various component options of mixin into the referenced component.

Custom blending

1. Define a mixin file that writes functions that need to be reused

two。 Introduced in files that need to use the blending feature

Note: mixing can put one or more classes, or only methods and functions. According to the object-oriented principle of single responsibility and opening and closing, multiple classes can be excluded. If only methods and functions are put, mixing will lose the meaning of the class.

The final conclusion is that it is best to put a class or a class composed of multiple classes or aggregates in the mix.

3. The data in the component can be modified, or the data in the corresponding component can be modified directly when mixed into the file.

Global blending

Define a global mixin file

Introduce a defined mixins file into the project main.js file

Then all files in the project can directly use the method defined in the mix

This is the end of the article on "the method of vue mapping and how to mix it into use". Thank you for reading! I believe you all have a certain understanding of the knowledge of "vue mapping method and how to mix it into use". If you want to learn more knowledge, you are welcome to follow the industry information channel.

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.