处理边界情况之使用$root访问根实例

点击打开视频教程

在每个 new Vue 实例的子组件中，其根实例可以通过 $root property 进行访问。

例如，在这个根实例中：

src\main.js

import Vue from 'vue'
import App from './App.vue'
//引入ElementUI组件库
import ElementUI from 'element-ui';
//引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css';

// import {Plugin1,Plugin2} from './plugins/plugins.js'

Vue.config.productionTip = false

//使用ElementUI
Vue.use(ElementUI)

// Vue.use(Plugin1,'参数1')

// Vue.use(Plugin2,'参数2')

new Vue({

  data: {
    foo: 1
  },
  computed: {
    bar: function () {
      return '满天星辰不及你'
    }
  },
  methods: {
    baz: function () { 
      return '满天星辰不及你吖'
    }
  },

  render: h => h(App),
}).$mount('#app')

所有的子组件都可以将这个实例作为一个全局 store 来访问或使用。

注意：对于 demo 或非常小型的有少量组件的应用来说这是很方便的。不过这个模式扩展到中大型应用来说就不然了。因此在绝大多数情况下，我们强烈推荐使用 Vuex 来管理应用的状态。