Vue.js에서 app1과 app2라는 두 개의 인스턴스가 있고 서로 데이터를 전달하는 방법은 다음과 같습니다.
이 코드에서는 watch 속성을 사용하여 첫 번째 인스턴스의 데이터 변화를 감지하고, 해당 데이터를 두 번째 인스턴스로 전달합니다. 두 번째 인스턴스는 그 값을 받아서 화면에 표시합니다. 이렇게 함으로써 두 Vue.js 인스턴스 간에 데이터를 전달할 수 있습니다. 즉, 화면에서 사용자가 어떤 행위를 했을 때, 데이터 전달하기 위한 사용으로 보시면 됩니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js 이벤트 버스 예제</title>
<!-- Vue.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<!-- 첫 번째 인스턴스 -->
<div id="app1">
<p>App 1의 데이터: {{ dataFromApp1 }}</p>
<input v-model="message" placeholder="App 2로 전달할 메시지를 입력하세요">
</div>
<!-- 두 번째 인스턴스 -->
<div id="app2">
<p>App 2의 데이터: {{ dataFromApp2 }}</p>
</div>
<script>
// 첫 번째 Vue.js 인스턴스
new Vue({
el: '#app1',
data: {
message: '',
dataFromApp1: ''
},
watch: {
message: function (newValue) {
// 메시지가 변경되면 두 번째 인스턴스로 데이터를 전달합니다.
app2.dataFromApp2 = newValue;
}
}
});
// 두 번째 Vue.js 인스턴스
var app2 = new Vue({
el: '#app2',
data: {
dataFromApp2: ''
}
});
</script>
</body>
</html>