Vue 模板( 部分)中的表达式、指令绑定(如
v-bind
, v-on
)和插值({{ }}
)都在一个特定的作用域内求值。这个作用域由当前 组件实例 提供的上下文决定。
以下是模板可以访问的主要数据来源(按优先级和作用域排序):
data
, computed
, methods
, props
, setup()
返回值 (
的顶层绑定) 等定义。
Double: {{ doubleCount }}
{{ message }}
Reversed: {{ reversedMessage }}
Initial Count: {{ initialCount }}
data
/ ref
/reactive
:定义组件内部状态。computed
:定义基于其他状态派生的值。methods
:定义可调用的函数(通常用于事件处理或逻辑)。props
:接收来自父组件的数据(只读)。setup()
返回值 /
顶层绑定:在 Composition API 中提供上述所有功能。v-bind
或 :
) 传递给当前组件。props
选项声明后,在模板中直接使用名称访问。
User: {{ user.name }}
Starting point: {{ initialValue }}
User: {{ user.name }}
Starting point: {{ initialValue }}
defineProps
或 props
选项) 才能访问。provide
提供的数据/方法。inject
获取。
...
ref
或 reactive
对象,则注入后保持响应式连接。props
/emits
或状态管理 (Pinia)。$
开头)。$attrs
, $slots
, $emit
, $route
, $store
)。$attrs
:包含父组件传递但未在 props
中声明的所有属性(常用于透传)。$slots
:访问组件接收的插槽内容。$emit
:触发自定义事件(@my-event="handler"
对应 $emit('my-event')
)。$el
(Options API):访问组件根 DOM 元素(在 mounted
后可用,Composition API 通常用 ref
替代)。$router
/ $route
(Vue Router):访问路由实例和当前路由信息(需安装路由)。$store
(Vuex/Pinia):访问状态管理库的 Store(需安装状态库)。
Current Path: {{ $route.path }}
$router
, $route
, $store
等需要对应的插件 (vue-router
, pinia/vuex
) 安装并注册到应用。$emit
、$route
或 $store
可能使逻辑分散,复杂逻辑应尽量移到
部分。window
, document
, console
) 或全局定义的变量/函数。window
, 全局 const myGlobal = ...
)。
Config: {{ globalValue }}
window
或全局变量。这会:
部分引入(如从配置模块导入),然后作为组件自身的状态或计算属性暴露给模板。当模板中使用一个名称 (如 message
) 时,Vue 会按以下顺序查找其来源:
data
/ref
/reactive
, computed
, methods
, props
声明项, setup()
返回值/
顶层绑定) ➔ 最高优先级props
(需声明)inject
) (需注入)$attrs
, $slots
, $emit
, $route
等)window
, document
) (需显式访问或间接引用,强烈不推荐直接使用)❗ 重要规则:
count
,就不会去访问注入的或全局的同名变量。props
(Vue 会警告)。
标签中定义的局部变量 (除非通过 setup()
返回或
顶层暴露)。例如:
Vue 有意将模板的执行环境与全局作用域隔离,主要为了:
props
、注入或 Vue 内置属性,代码行为更清晰。ref
, reactive
, data
) 和 props
:这是最清晰、最可维护的数据来源。
中导入配置模块或初始化时读取全局对象,然后将其转化为组件的响应式状态 (ref
, reactive
) 或计算属性 (computed
) 暴露给模板。$route
, $store
进行复杂逻辑:将相关逻辑移到
中的方法、计算属性或 Composables 函数中,保持模板简洁。props
用 propXxx
,注入用 injectedXxx
)可以显著提高代码可读性。理解并正确管理模板的数据来源,是编写 可维护、可预测、高性能 Vue 应用的基础!