polyak-y
@polyak-y
Js, React.js,Vue.js,css

Как во vue3 связывать инстансы?

Начал смотреть документацию по vue3. Не совсем понял как связывать два различных инстанса. К примеру:
<div id="app">
    <h2>Первый инстанс</h2>
    <h2>{{ title }}</h2>
    <button @click="title = 'update title'">update title</button>
  </div>

  <hr>

  <div id="app2">
    <h2>Второй инстанс</h2>
    <h2>{{ title }}</h2>
    <button @click="updateFirstTitle">updateFirstTitle</button>
  </div>
  
  <script src="https://unpkg.com/vue@next"></script>
  <script>

    const MyApp = Vue.createApp({
      data() {
        return {
          title: 'Hello I am Vue!',
        }
      },
    })

    const MyApp2 = Vue.createApp({
      data() {
        return {
          title: 'Hello from vue2!!!'
        }
      },
      methods: {
        updateFirstTitle() {
          MyApp.title = 'Update from second app'
          console.log('=====', MyApp)
        }
      }
    })
    
    MyApp.mount('#app') //новое создание инстанса
    MyApp2.mount('#app2') //новое создание инстанса
  </script>

есть два инстанста MyApp и MyApp2, по клику на кнопку второго инстанса я хочу поменять title первого. Конструкция MyApp.titile = 'Новое значение' не работает.
  • Вопрос задан
  • 86 просмотров
Решения вопроса 1
0xD34F
@0xD34F Куратор тега Vue.js
есть два инстанста MyApp и MyApp2

Инстанса чего? Вам нужен экземпляр корневого компонента, его возвращает метод mount.

UPD. Такого поведения пытались достичь?
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы