处理边界情况
All the features on this page document the handling of edge cases,meaning unusual situations that sometimes require bending Vue’s rules a little. Note however, that they all have disadvantages or situations where they could be dangerous.
特殊情况下的处理方式,有利有弊
1. 访问元素&组件
1.1 访问根实例(Accessing the Root Instance )
通过 this.$root
根实例
// The root Vue instance
new Vue({
data: {
foo: 1
},
created:function(){
// 【获取根组件的数据】
console.log(this.$root.foo);
// 【写入根组件的数据】
this.$root.foo = 2
// 【访问根组件的计算属性】
this.$root.bar;
},
computed: {
bar: function () {
alert('我是计算属性bar,只要有人访问我或者改变我的值,我就执行')
}
},
methods: {
baz: function () {
alert('baz')
}
}
})
这种适合小型代码量时使用,中大型项目还是推荐用 Vuex
来管理应用的状态:如下
用根实例获取状态 VS 用Vuex
管理状态
完整代码
1.2 访问父组件实例
Similar to
$root
, the$parent
proper