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

This article mainly introduces the relevant knowledge of how to use Vue.prototype in Vue, the content is detailed and easy to understand, the operation is simple and fast, and has a certain reference value. I believe you will gain something after reading this article on how to use Vue.prototype in Vue. Let's take a look at it.

1. Basic example

Add a variable to Vue.prototype in main.js

Vue.prototype.$appName ='My App'

This makes $appName available in all Vue instances, even before the instance is created

New Vue ({beforeCreate: function () {console.log (this.$appName)}})

The console will print out the My App. It's as simple as that!

two。 Set the scope for the instance prototype

Why does appName start with? Is that important? There is no magic here. The beginning? Is that important? There is no magic here. The beginning? Is that important? There is no magic here. Is a simple convention for property that is available in all instances of Vue. This avoids conflicts with defined data, methods, and calculation properties.

If we set:

Vue.prototype.appName ='My App'

So what does the following code output:

New Vue ({data: {/ / Oh, `appName` is also an instance property name we defined! AppName: 'The name of some other app'}, beforeCreate: function () {console.log (this.appName)}, created: function () {console.log (this.appName)}})

"My App" appears first in the log, followed by "The name of some other app", because this.appName is overwritten by data after the instance is created. We prevent this from happening by setting a scope for the instance property. You can also use your own conventions according to your preferences, such as setting a scope for the instance property to prevent this from happening. You can also use your own conventions according to your preferences, such as setting a scope for the instance property to prevent this from happening. You can also use your own conventions, such as _ appName or Ω appName, according to your preferences, to avoid conflicts with plug-ins or future plug-ins.

3. Register and use global variables

Each component is an instance of vue, Vue.prototype plus a variable, but a property is added to each component, and the value of this property is not global.

Such as the following example:

/ / main.jsimport Vue from 'vue'import App from'. / App'import router from'. / router'import store from'. / store'Vue.config.productionTip = falseVue.prototype.$appName = 'main'new Vue ({el:' # app', store, router, components: {App}, template:',}) / / registers an attribute of $appName to all components, giving the initial value 'main' All components can access this variable using this.$appName / / if no value is assigned in the component, the initial values are all 'main'// home.vue change name goto test2 export default {methods: {changeName () {this.$appName = "test1"}, gotoTest2 () {this.$router.push (' / about')} / / about.vue {{this.$appName}} in test2

Click change name in home and then jump to about,about where main in test2 is still displayed.

If you want to implement the function of a global variable, you need to change the property to a reference type

Vue.prototype.$appName = {name: 'main'}

Use this.$appName.name to change and reference the corresponding values later

This displays test1 in test2 after entering about

4. The context of the prototype method

In JavaScript, the method of a prototype gets the context of the instance, that is, it can be accessed using this: data, evaluation properties, methods, or anything else defined on the instance.

Let's apply it to a method called $reverseText:

/ / main.jsVue.prototype.$reverseText = function (propertyName) {this [propertyName] = this [propertyName] .split (') .reverse () .join ('')} / / corresponding component export default {data () {return {message: 'Hello'}} Created () {console.log (this.message) / / = > "Hello" this.$reverseText ('message') console.log (this.message) / / = > "olleH"} 5. Application example

5.1 introduction of axios

Npm install vue-axios-- savenpm install qs.js-- save / / its function is to convert the json format directly into the format required by data / / mian.jsimport Vue from 'vue'import axios from' axios'import qs from 'qs'Vue.prototype.$axios = axios / / global registration, using the method: this.$axiosVue.prototype.qs = qs / / global registration The use method is: this.qs// corresponding component export default {data () {return {userId:666, token:'',}}, created () {this.$axios ({method:'post', url:'api') Data:this.qs.stringify ({/ / here is the data sent to the backend userId:this.userId, token:this.token })}) .then ((response) = > {/ / the syntax of ES6 console.log (response) / / data returned after a successful request}) .catch ((error) = > {console.log (error) / / data returned after a failed request})} Vue.prototype, Vue.component and Vue.use differences 1, Vue.prototype

In cases where you need to use it in multiple places but do not want to pollute the global scope, this definition is available in each Vue instance.

Reference: https://cn.vuejs.org/v2/cookbook/adding-instance-properties.html

$indicates that this is a property that is available in all instances of Vue

Often used in methods, variables, etc.

Import echarts from 'echarts'Vue.prototype.$echarts = echarts2, vue.component

Registering components globally

The first parameter is the component name that is written when the component is called

The second parameter is the name written when the component is introduced

Can be used to register custom components

Import myLoading from 'base/loading'Vue.component (' myLoading',myLoading); 3. Vue.use

It is also registered globally, and the difference from component is that the parameters received must have an install method.

Commonly used to register third-party plug-ins

Import ElementUI from 'element-ui';Vue.use (ElementUI); this is the end of the article on "how to use Vue.prototype in Vue". Thank you for reading! I believe you all have a certain understanding of the knowledge of "how to use Vue.prototype in Vue". If you want to learn more, 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.