處理邊界情況之使用$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 來管理應用的狀態，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502035.html
標籤：其他
上一篇：大家都能看得懂的原始碼-如何讓定時器在頁面最小化的時候不執行？
下一篇：前端周刊：2022-13 期