M
M
Mad Coder2020-10-09 23:52:47
Vue.js
Mad Coder, 2020-10-09 23:52:47

How to connect instances in vue3?

I started looking at the documentation for vue3. I did not quite understand how to connect two different instances. For example:

<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/[email protected]"></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>

there are two instances MyApp and MyApp2, by clicking on the button of the second instance I want to change the title of the first one. The MyApp.titile = 'New Value' construct does not work.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
0
0xD34F, 2020-10-10
@polyak-y

there are two instances MyApp and MyApp2

Instance of what? You need an instance of the root component, which is returned by the mount method.
UPD. Is this the behavior you tried to achieve ?

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question