header로 페이지의 언어를 변경하려고 한다. 기본으로 한국어, 서브로 영어를 사용한다. 코드는 아래와 같다.
Header.vue
<template>
<div id = "title-toolbar">
<select id="select-language" v-model="selectedLanguage" @change="changeLanguage">
<option value="ko">한국어</option>
<option value="en">English</option>
</select>
</div>
</template>
<script>
export default {
name: 'Header',
data() {
return {
selectedLanguage: 'ko' // 초기 언어 설정
};
},
methods: {
changeLanguage() {
// 선택된 언어에 따라 작업 수행
if (this.selectedLanguage == 'ko') {
// 한국어로 변경하는 작업 수행
alert('한국어로 변경');
} else if (this.selectedLanguage === 'en') {
// 영어로 변경하는 작업 수행
alert('Change to English');
}
}
}
};
</script>
<style scoped>
/* Header component styles */
</style>
후 App.vue에 추가해주면 된다.
App.vue
<template>
<div id="app">
<Header></Header> // 추가된 부분
<div id="content" class="content">
<router-view></router-view>
</div>
</div>
</template>
<script>
import Header from './components/layout/Header.vue' // 추가된 부분
export default {
name: 'App',
components: {
Header // 추가된 부분
}
}
</script>
테스트
제대로 select 박스가 생겼다.
English를 선택했을 때
한국어로 선택했을 때
이제 홈페이지의 언어를 바꿔보자.
이벤트에 따라서 다른 컴포넌트를 동적으로 바꾸는 방법은 다양하게 있다. event-bus, provide 및 inject 등등.. vue.js 3.x 버전에서는 provide 및 inject 방식을 권장한다고 한다. 하지만, 그냥 부모 컴포넌트에서 이벤트를 통해 데이터를 전달하는 방식이 더 코드가 깔끔할 것 같아서 해당 방식을 사용했다.
Header.vue
<template>
<div id="title-toolbar">
<select id="select-language" v-model="selectedLanguage" @change="changeLanguage">
<option value="ko">한국어</option>
<option value="en">English</option>
</select>
</div>
</template>
<script>
export default {
name: 'Header',
data() {
return {
selectedLanguage: 'ko' // 초기 언어 설정
};
},
methods: {
changeLanguage() {
// 선택된 언어에 따라 작업 수행
if (this.selectedLanguage === 'ko') {
// 한국어로 변경하는 작업 수행
document.documentElement.lang = 'ko'; // 페이지의 언어 설정
} else if (this.selectedLanguage === 'en') {
// 영어로 변경하는 작업 수행
document.documentElement.lang = 'en'; // 페이지의 언어 설정
}
<!--추가된 부분-->
this.$emit('languageChanged', this.selectedLanguage); // 선택된 언어를 이벤트로 발생
}
}
};
</script>App.vue
<template>
<div id="app">
<!--변경된 부분-->
<Header @languageChanged="handleLanguageChanged"></Header>
<h1>{{ test }}</h1>
<div id="content" class="content">
<router-view></router-view>
</div>
</div>
</template>
<script>
import Header from './components/layout/Header.vue'
export default {
name: 'App',
components: {
Header
},
<!--추가된 부분-->
data() {
return {
test: '테스트' // 초기 페이지 제목
};
},
methods: {
handleLanguageChanged(language) {
if (language === 'ko') {
this.test = '테스트';
} else if (language === 'en') {
this.test = 'Test';
}
}
}
}
</script>
테스트
테스트는 h1을 하나 추가해서 변경이 되는지 확인해주었다.
기본은 한국어로 '테스트'가 출력된다. english로 바꾸는 경우 'Test'로 변경이 잘 된다.
