Здравствуйте.
Сразу прошу извинения если ошибусь в терминологии)
В поекте Vue.js у меня 2 объекта: App.vue и App2.vue
Вот в общем "краткое" содержание проекта:
index.html
|
Код:
|
<body>
<div id="app"></div>
<hr>
<div id="app2"></div>
<!-- built files will be auto injected -->
</body> |
main.js
|
Код:
|
import Vue from 'vue'
import App from './App.vue'
import App2 from './App2.vue'
Vue.config.productionTip = false;
var vue1 = new Vue({
render: function (h) {
return h(App)
},
}).$mount('#app');
new Vue({
render: function (h) {
return h(App2)
},
}).$mount('#app2'); |
App.vue
|
Код:
|
<template>
<div id="app">
<h2>{{ title }}</h2>
</div>
</template>
<script>
export default {
data() {
return {
title: "Hello I am Vue!"
};
},
};
</script> |
App2.vue
|
Код:
|
<template>
<div id="app2">
<h2>{{ title }}</h2>
<button @click="updateFirstTitle">Update first title</button>
</div>
</template>
<script>
export default {
data() {
return {
title: "Hello from Vue 2"
};
},
methods: {
updateFirstTitle() {
vue1.title = "Updated from second app";
}
}
};
</script> |
Я хочу методом
updateFirstTitle из
App2.vue поменять значение
title в
App.vue и пытаюсь обратиться к нему таким образом:
vue1.title
В результате в консоли возникает сообщение об ошибке:
Error in v-on handler: "ReferenceError: vue1 is not defined" Подскажите пожалуйста, как в данном случае я могу обратиться к соседнему объекту?
Заранее благодарен!