Vue之处理边界情况

处理边界情况

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