| SANIOK_AV |
21.12.2019 13:10 |
Vue.js как обратиться к соседнему объекту.
Здравствуйте.
Сразу прошу извинения если ошибусь в терминологии)
В поекте 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" Подскажите пожалуйста, как в данном случае я могу обратиться к соседнему объекту?
Заранее благодарен! |