标签：Vue ElementUI 实例 048 组件 import root
处理边界情况之使用$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 来管理应用的状态。
标签：Vue,ElementUI,实例,048,组件,import,root 来源： https://www.cnblogs.com/mochenxiya/p/16593779.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。