前端大杂烩

vue使用$root设置全局属性

2018-08-29  本文已影响0人  w如弈如意c

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 实现父子组件通信
上一篇下一篇

猜你喜欢

热点阅读