JS addition to existing functions, Vue also has its own unique scope level. Scope control variables which can be used as well as where it's available. It controls which of the different parts of the application of the "visibility."
The difference between the level of understanding of the scope Vue provide will help us to write cleaner code.
The following is a vue in four levels of scope:
Global scope
Subtree Scope
Components Scope
Examples of Scope
Take a look at what these scopes are yes.
Global scope
Global Vue application of similar scope and global scope in any programming language, anywhere in the application of these variables are available.
It can be seen as a global scope application scope, because it will limit the scope for the entire application.
Use global scope
The main way to use a global scope is to add value to the Vue prototype:
Vue.prototype.$globalValue = 'Global Scope!';
By adding it to the prototype object Vue, it can be automatically used in each component of the application. It can be accessed directly from the component like this:
export default {
mounted() {
console.log(this.$globalValue); // 'Global Scope!'
},
};
Use $as a prefix for these variables is a standard practice, so we know they are global values, rather than each unique components.
Vue, vue-routerand vuex(as well as many other libraries) are using this technique to define global values. For example, from vue-routerthe $routesubject is a global scope variables.
Subtree Scope
Most of the time, a bit like a sledgehammer globally, we need some more precise things. Variable Scope subtree scope of a specific part of the application, rather than the entire application.
This level of scope may be the least used, but when really need easy to use. Typically, a set of components need to share many of the same data, and transmitting data using the props cumbersome.
This scope is best suited for a shared context information, the context information may be changed according to the position of the component in the application, this may be:
State and local data - if only a small part of the application needs to use Vuex, you do not need to use Vuex. If you use props delivery will become complicated and cumbersome, at this time, the sub-tree scope may be our best option.
Configuration - sometimes we need components run in a certain way, but run only a part of the application. For example, all registration form
Inputcomponents require verification, but we do not want the entire application will require authentication.
Use sub-tree scope
Through the use of sub-tree scope provideand injectcreated. We can provide a desired value for the entire subtree, and then inject them in their assembly require.
Components Scope
More specific, the variable components may be used to scope a single component. But this should not be more specific example of the scope and confused.
If a variable component having a scope, then it is a single variable for all instances of a component can be used. We can have the same number of components, and they are able to access the same variable.
You may be familiar with the JS module scope. Any matters defined in a single module or file belong to the same module scope. Since the components are defined in a single file, so that all the contents of components in the same module scope.
Using components Scope
To use the component scope, we need to define a variable component in the same file:
<template>
<div class="new-component">
{{ componentScope }}
</div>
</template>
<script>
const componentScope = 'This is in the component scope';
export default {
data() {
return {
componentScope: componentScope,
};
},
};
</script>
In this assembly rendered variable componentScopeis the same variable, regardless of how many times this component, componentScope always only one, not multiple copies.
If an instance of this component of the modified componentScopevalue, each of the other instances of that assembly changes. This embodiment should not be used for communication between components, but this is a good way to share data.
Examples of Scope
Examples of scope is the most common form we can get the Vue scoped variables, instance variables have any scope can only be used for specific usage components. We usually referred to as internal state, sometimes called the local state.
Example Scope
Whenever the data()function or use computed props, are used in the examples scope.
Even add directly to the component instance attribute can achieve the following effects:
someMethod() {
this.newProperty = 'Instance scope';
}
However, if you add a property in this way, you must remember , they are not the type of response.
Author: Michael Thiessen Translator: Front Ash Source: Michael
Original: https:? //Frontendsociety.com/why-you-shouldnt-use-vue-component-ff019fbcac2e gi = ce7b162d53d4
communicate with
Vue these modifiers help me save development time by 20%
You know in JavaScript error object what type?
The last 24 ES6 practical method has been well received, this time again 10
