處理邊界情況之使用$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 來管理應用的狀態。