陕西交通建设集团蓝商分公司网站,wordpress增加模板,建设企业网站的目的,静态网站源文件下载作用域控制可以使用哪些变量以及在何处使用。它控制它们对应用程序的不同部分的“可见性”。了解 Vue 提供的作用域级别之间的差异会帮助我们编写更清晰的代码。下面是 vue 中4个级别的作用域#xff1a;全局作用域子树作用域组件作用域实例作用域全局作用域Vue 应用程序中的全…作用域控制可以使用哪些变量以及在何处使用。它控制它们对应用程序的不同部分的“可见性”。了解 Vue 提供的作用域级别之间的差异会帮助我们编写更清晰的代码。下面是 vue 中4个级别的作用域全局作用域子树作用域组件作用域实例作用域全局作用域Vue 应用程序中的全局作用域与任何编程语言中的全局作用域类似这些变量在应用程序中的任何地方都是可用的。可以把全局作用域看作应用程序作用域因为它将作用域限制为整个应用程序。使用全局作用域使用全局作用域的主要方式是向Vue原型添加一个值Vue.prototype.$globalValue Global Scope!;通过将其添加到 Vue 对象的原型中可以在应用程序的每个组件上自动使用它。可以像这样直接从组件访问它export default { mounted() { console.log(this.$globalValue); // Global Scope! },};使用$作为这些变量的前缀是一种标准做法因此我们知道它们是全局值而不是每个组件唯一的。Vue、vue-router和vuex(以及许多其他库)都使用这种技术来定义全局值。例如来自vue-router的$route对象是这样一个全局作用域的变量。子树作用域大多数时候全局范围有点像大锤我们需要一些更精确的东西。子树作用域中的变量作用域是应用程序的特定部分而不是整个应用程序。此级别的作用域可能是最少使用的但是在确实需要使用时非常方便。 通常一组组件需要共享很多相同的数据并且通过props传递数据非常繁琐。此作用域最适合用于共享上下文信息这些上下文信息可以根据组件在应用程序中的位置进行更改可以是这样的本地状态和数据-如果只有一小部分应用程序需要使用 Vuex则无需使用 Vuex。 如果使用props传递会变得繁琐且麻烦此时子树作用域可能是我们最好的选择。配置-有时我们需要组件以某种特定方式运行但仅在应用程序的一部分中运行。 例如注册表单中的所有Input组件都需要验证但是我们不想在整个应用程序中都要求验证。使用子树作用域子树作用域是通过使用provide和inject创建的。 我们提供希望可用于整个子树的值然后将它们注入需要它们的组件中。组件作用域更具体一点组件作用域使变量可用于单个组件。但是这不应该与更具体的实例作用域相混淆。如果一个变量具有组件作用域那么它就是一个组件的所有实例都可以使用的单个变量。我们可以拥有几个相同的组件并且它们都能够访问相同的变量。你可能熟悉 JS 中的模块作用域。在单个模块或文件中定义的任何内容都属于相同的模块作用域。由于组件是在单个文件中定义的所以组件中的所有内容都在相同的模块作用域内。使用组件作用域要使用组件作用域我们需要在与组件相同的文件中定义一个变量 {{ componentScope }} 在此组件中渲染的变量componentScope是相同的变量不管使用此组件多少次componentScope 始终只有一个没有多个副本。如果此组件的一个实例修改了componentScope的值则该组件的每个其他实例都会更改。 不应使用这种方式在组件之间进行通信但这是共享数据的一种好方法。实例作用域实例作用域是我们可以获得的Vue作用域变量最常见形式具有实例作用域的任何变量仅可用于组件的特定用法。 我们通常将其称为内部状态有时也称为局部状态。使用实例作用域无论何时使用data()函数或使用computed props都是在使用实例作用域。甚至直接向组件实例添加属性也可以达到以下效果someMethod() { this.newProperty Instance scope;}但是如果以这种方式添加属性则必须记住它们不是响应式的。想了解更多前端资讯及前端知识欢迎关注公众号“一郭鲜”学习前端不迷路
