uniapp中的$vm
$vm
是 当前页面 Vue 实例 的引用,在 uni-app(基于 Vue2)里,通过 getCurrentPages()
取到的页面对象并不是 Vue 实例本身,而是一个 包含 $vm
属性的对象,这个 $vm
才是真正的 Vue 组件实例,因此:
const pages = getCurrentPages();
const prevPage = pages[pages.length - 2]; // 这是 Page 对象
const vm = prevPage.$vm; // 这才是 Vue 实例
为什么要用 $vm
?
写法 | 作用 |
---|---|
prevPage.$vm.xxx | 访问上一级页面 data、methods、computed 等 |
prevPage.$vm.someMethod(data) | 直接调用上一级页面定义的函数 |
举个完整例子
// 页面 B 返回时携带参数
const pages = getCurrentPages();
const prevPage = pages[pages.length - 2];
prevPage.$vm.receiveBackData?.({ id: 123, name: 'Tom' });
uni.navigateBack();
// 页面 A
export default {data() {return { backData: null };},methods: {receiveBackData(data) {this.backData = data; // 拿到回传}}
}
注意
- 只能在
onLoad
/onShow
/onReady
之后才能拿到$vm
。 - 如果你在 nvue 页面,需要用
$vm
的$mp.page
再包一层,写法略有差异。
一句话总结:
$vm
就是「页面级 Vue 实例」的快捷方式,方便你在页面栈里直接操作上一级页面。