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

Most people do not understand the knowledge points of this article "what scope is there in vue", so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can get something after reading this article. Let's take a look at this "what scope is there in vue" article.

1. Global scope

The global scope in a Vue application is similar to that in any programming language, and these variables are available anywhere in the application.

You can think of a global scope as an application scope because it limits the scope to the entire application.

Use global scope

The main way to use global scope is to add a value to the Vue prototype:

Vue.prototype.$globalValue = 'Global copiers'

By adding it to the prototype of the Vue object, you can use it automatically on each component of the application. You can access it directly from the component like this:

Export default {mounted () {console.log (this.$globalValue); / / 'Global scopes'},}

It is standard practice to use $as a prefix for these variables, so we know that they are global values, not unique to each component.

Vue, vue-router, and vuex (and many other libraries) use this technique to define global values. For example, the $route object from vue-router is such a global-scoped variable.

two。 Subtree scope

Most of the time, the global scope is a bit like a sledgehammer, and we need something more precise. The variable scope in the subtree scope is a specific part of the application, not the entire application.

This level of scope is probably the least used, but it is very convenient when it is really needed. In general, a set of components needs to share much of the same data, and passing data through props is tedious.

This scope is best suited for sharing context information, which can be changed according to the location of the component in the application, as follows:

Local status and data-if only a small number of applications need to use Vuex, you do not need to use Vuex. If you use props delivery will become cumbersome and cumbersome, at this point, the subtree scope may be our best choice.

Configuration-sometimes we need components to run in a specific way, but only in part of the application. For example, all Input components in the registration form require validation, but we don't want to require validation throughout the application.

Use subtree scope:

The subtree scope is created by using provide and inject. We provide values that we want to be available for the entire subtree, and then inject them into the components that need them.

3. Component scope

More specifically, the component scope makes variables available to individual components. But this should not be confused with a more specific instance scope.

If a variable has a component scope, it is a single variable that can be used by all instances of a component. We can have several identical components, and they can all access the same variables.

You may be familiar with the module scope in JS. Anything defined in a single module or file belongs to the same module scope. Because the component is defined in a single file, everything in the component is in the same module scope.

Use component scope:

To use the component scope, we need to define a variable in the same file as the component:

The variable componentScope rendered in this component is the same variable, and no matter how many times you use this component, componentScope always has only one and no more than one copy.

If one instance of this component modifies the value of componentScope, every other instance of the component changes. You should not use this way to communicate between components, but it is a good way to share data.

4. Instance scope

Instance scope is the most common form of Vue scope variables that we can get, and any variable with instance scope can only be used for specific uses of components. We usually refer to it as an internal state, sometimes as a local state.

Use instance scope:

Whenever you use the data () function or computed props, you are using the instance scope.

Even adding properties directly to the component instance can achieve the following effects:

SomeMethod () {this.newProperty = 'Instance scope';} above is the content of this article about "what is the scope in vue". I believe everyone has a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please 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.