Установите глобальную переменную из данных div-* атрибут в Vuejs3

#vue.js #vuejs3

Вопрос:

Я создаю приложение vue3, которое создается следующим образом:

 <div id="my-app" data-string="demo"></div>
<script src=my-app.js></script>

Мне data-string нужно задать значение глобальной переменной, доступной для всех моих компонентов, или способ чисто получить это значение и передать его всем моим компонентам. Я использую Vue 3 с машинописным текстом. Я перепробовал несколько вещей и не могу этого понять. Любая помощь была бы очень признательна. Спасибо!

1. Хорошо, если вы «создаете приложение vue», действительно ли эти данные должны быть сначала инициированы внутри атрибута данных HTML. И не наоборот, как это предполагается при разработке приложений vue?

2. Также найдите «vue обмениваться данными между компонентами», вы можете обмениваться данными с вашего my-app.js к любому компоненту. Или поищите, что такое «магазин vue».

Ответ №1:

Чтобы это сделать, вы можете сделать что-то вроде этого

Сначала получите значение

 const globalScopeValue = document.getElementById('my-app').dataset.string

ПРЕЖДЕ чем вы создадите свое приложение Vue!

Затем в вашем приложении.vue (основной компонент) используйте Provide.

Затем используйте инъекцию в каждый другой компонент, который вам нужен globalScopeValue .

1. Привет, Адам, это первое утверждение возвращается неопределенным, когда я его пробую. Я попробовал в своем файле main.ts и главном компоненте App.vue. Тем не менее, материал для обеспечения/введения выглядит хорошо! Есть какие-нибудь идеи по первой части?

2.Попробуйте подождать, пока загрузится окно, затем возьмите data из dataset , а затем запустите vue app . Дайте мне знать, если это помогло 😉