Vue.js глобальный доступ к данным с v-моделью

Question

Я работаю над веб-приложением, где пользователи могут работать над проектом.Структура приложения выглядит следующим образом:

• Компонент A (приложение)
• Компонент B1-Bn (верхний и нижний колонтитулы, главное окно и т. Д., Дочерние элементы A)
• Компонент C1 (Область ввода; с входами для пользователя, чтобы работать над проектом, дочерний элемент главного окна)
• Компонент C2 (Область вывода; холст, который показывает результат на основе входных данных из C1. Вв будущем также будет «графическая» область ввода, которая синхронизируется с C1. Дочерний элемент главного окна)
• Компонент D1-Dn (Отдельные части области ввода, такие как таблицы, расширенные компоненты ввода и т. д. Дочерний элемент C1)

Теперь проект, над которым работает пользователь, состоит из объекта, хранящегося в Компоненте A. Компонент Dn в будущем должен записать объект в Компонент A, а также в C2.

Я могуполучить V-модель на входных компонентах Dn для работы.Я попытался передать данные из A в C1 через props / v-bind, а затем в Dn я смоделировал реквизит из C1 (который происходит из A) в поле ввода.Я также пытался использовать модификатор sync без успеха.

Кажется, у меня недостаточно понимания логики vue.Я пришел из рабочего стола, где вы просто определяете область видимости переменных.Я также обнаружил, что у других учеников vue такая же проблема понимания, но почему-то ответы, которые я нашел, были недостаточны.

Мне нужна «глобальная» переменная, которая может редактироваться каждым компонентом и связана с элементами в DOM.,Каков наилучший способ добиться этого?

Answer 1

Спасибо за ответы до сих пор.Я думаю, что они оба работают.Я нашел другое решение, потому что теперь я полностью понимаю, как данные передаются в vue: Обратите внимание, что объекты и массивы в JavaScript передаются по ссылке, поэтому, если свойство является массивом или объектом, изменение объекта или массива внутри дочернего компонента повлияет на родительское состояние. Я буду передавать все данные в виде массивов в будущем, так как мне нужны только ссылки.Единственный вопрос, который остается, заключается в том, почему программисту не разрешается самостоятельно определять, передаются ли данные по ссылке или нет ...

Источник: Vue.js Guide

Answer 2

Объявите вашу переменную в данных при создании Vue Object в вашем корневом компоненте (Компонент A), например

var app = new Vue({
   data: function(){
        return {
            showSetting: {}
        }
    },
})

Теперь вы можете получить доступ к этой переменной showSetting в любом компоненте, например

app.showSetting;
//change it in any component
app.showSetting = {a:1,b:2};
//or append new value to object
Object.assign({d:3},app.showSetting);