文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

vue 中有哪些作用域

2024-04-02 19:55

关注

今天就跟大家聊聊有关vue 中有哪些作用域,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

1. 全局作用域

Vue 应用程序中的全局作用域与任何编程语言中的全局作用域类似,这些变量在应用程序中的任何地方都是可用的。

可以把全局作用域看作应用程序作用域,因为它将作用域限制为整个应用程序。

使用全局作用域

使用全局作用域的主要方式是向Vue原型添加一个值:

Vue.prototype.$globalValue = 'Global Scope!';

通过将其添加到 Vue 对象的原型中,可以在应用程序的每个组件上自动使用它。可以像这样直接从组件访问它:

export default {   mounted() {     console.log(this.$globalValue);  // 'Global Scope!'   }, };

使用$作为这些变量的前缀是一种标准做法,因此我们知道它们是全局值,而不是每个组件唯一的。

Vue、vue-router和vuex(以及许多其他库)都使用这种技术来定义全局值。例如,来自vue-router的$route对象是这样一个全局作用域的变量。

2. 子树作用域

大多数时候,全局范围有点像大锤,我们需要一些更精确的东西。子树作用域中的变量作用域是应用程序的特定部分,而不是整个应用程序。

此级别的作用域可能是最少使用的,但是在确实需要使用时非常方便。通常,一组组件需要共享很多相同的数据,并且通过props传递数据非常繁琐。

此作用域最适合用于共享上下文信息,这些上下文信息可以根据组件在应用程序中的位置进行更改,可以是这样的:

使用子树作用域:

子树作用域是通过使用provide和inject创建的。我们提供希望可用于整个子树的值,然后将它们注入需要它们的组件中。

3. 组件作用域

更具体一点,组件作用域使变量可用于单个组件。但是这不应该与更具体的实例作用域相混淆。

如果一个变量具有组件作用域,那么它就是一个组件的所有实例都可以使用的单个变量。我们可以拥有几个相同的组件,并且它们都能够访问相同的变量。

你可能熟悉 JS  中的模块作用域。在单个模块或文件中定义的任何内容都属于相同的模块作用域。由于组件是在单个文件中定义的,所以组件中的所有内容都在相同的模块作用域内。

使用组件作用域:

要使用组件作用域,我们需要在与组件相同的文件中定义一个变量:

vue 中有哪些作用域

在此组件中渲染的变量componentScope是相同的变量,不管使用此组件多少次,componentScope 始终只有一个,没有多个副本。

如果此组件的一个实例修改了componentScope的值,则该组件的每个其他实例都会更改。不应使用这种方式在组件之间进行通信,但这是共享数据的一种好方法。

4. 实例作用域

实例作用域是我们可以获得的Vue作用域变量最常见形式,具有实例作用域的任何变量仅可用于组件的特定用法。我们通常将其称为内部状态,有时也称为局部状态。

使用实例作用域:

无论何时使用data()函数或使用computed props,都是在使用实例作用域。

甚至直接向组件实例添加属性也可以达到以下效果:

someMethod() {   this.newProperty = 'Instance scope'; }

看完上述内容,你们对vue 中有哪些作用域有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注编程网行业资讯频道,感谢大家的支持。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     801人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     348人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     311人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     432人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     220人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯