处理边界情况之使用$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 来访问或使用 
  
  
  
  
  
 。

<template> <div id="app"> <!-- 获取根组件的数据 --> {{ $root.foo }} <!-- 访问根组件的计算属性 --> {{ $root.bar }} <button @click="change">改变</button> </div> </template> <script> export default { name: App, data(){ return { } }, mounted(){ }, computed:{ }, methods:{ // 写入根组件的数据 change(){ this.$root.foo = 末晨曦吖 // 调用根组件的方法 let name = this.$root.baz() console.log(name); } } } </script> <style scoped> </style>

注意：对于 demo 或非常小型的有少量组件的应用来说这是很方便的 


 


 


 


 


 


 。不过这个模式扩展到中大型应用来说就不然了
 
 
 
 
 
 
。因此在绝大多数情况下












，我们强烈推荐使用 Vuex 来管理应用的状态  
   
   
   
   
   
 。