Проходить Vue, наблюдаемый как опора?

Question

var state = Vue.observable({
    selectedTab: ''
});

Vue.component('block-ui-tab', {
    props: ['name', 'handle', 'icon'],
    template: '<li :handle="handle" :class="{ active: state.selectedTab === handle }"><i :class="icon"></i>{{ name }}</li>'
});

var app = new Vue({
    el: '#app',
    data: {},
    methods: {},
    computed: {},
    watch:{},
    mounted: function(){},
});

Это не работает, поэтому мне интересно, как использовать наблюдаемое в компоненте и в корневом экземпляре vue?Передайте это как опору, или?

Answer 1

Возможно, вы захотите объявить state в параметре данных (см. Объявление реактивных свойств ). Затем вы можете передать его своему компоненту.

Vue.component('block-ui-tab', {
    props: ['name', 'handle', 'icon', 'state'],
    template: '<li :handle="handle" :class="{ active: state.selectedTab === handle }"><i :class="icon"></i>{{ name }}</li>'
});

var app = new Vue({
    el: '#app',
    data: {
        state: {
            selectedTab: '',
        }
    },
    methods: {},
    computed: {},
    watch:{},
    mounted: function(){},
});