vue使用$root设置全局属性

vue状态管理使用vuex,如果项目不大,逻辑不多,那么我们没必要用vuex给项目增加难度,只需要用$root设置根 Vue 实例的data就行了,如下:

main.js

let app = new Vue({
    el: '#app',
    // 全局数据,在其他页面或者组建可改变
    data: function () {
    return {
        s: ''
    }
    }, 
    router,
    store,
    template: '<router-view></router-view>'
})

a.vue

this.$root.s = '设置了s属性'

b.vue

console.log(this.$root.s)  // 设置了s属性
注:vm.root: 当前组件树的根 Vue 实例。如果当前实例没有父实例,此实例将会是其自己。详见:https://cn.vuejs.org/v2/api/#vm-root。----子实例可以用 this.parent 访问父实例,子实例被推入父实例的 children 数组中,但是,请节制地使用parent 和 $children - 它们的主要目的是作为访问组件的应急方法。更推荐用 props 和 events 实现父子组件通信
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • MP4格式是现在主流的视频格式之一,它的的兼容性很好,几乎支持所有的视频播放器,其它视频格式也可以转换成MP4视频...
    怪物猎人猛汉阅读 1,062评论 0 0
  • 问题: HEAD游离了,在一个不知名的分支上,查看分支如下: 分析: HEAD detached from ori...
    Lovell_阅读 2,517评论 0 0
  • 今天跟叔叔聊了大概两个小时,他作为商业成功的代表,我居然可以做到和他探讨相关方向和原则,这是《财富自由之路》给我带...
    桂宝舟阅读 189评论 0 1
  • 如常的一天,没有丝毫波澜,一如既往。心情不好不坏。蛮好
    飞飞总阅读 180评论 0 0