2.6.10
https://codepen.io/aaronbird/pen/JVRKwa
๋ฐ๋ชจ๋ฅผ ์์ฑํ์ต๋๋ค.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>demo</title>
<style>
.link {
cursor: pointer;
user-select: none;
}
</style>
</head>
<body>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<div id="app">
<transition>
<keep-alive include="foo">
<component :is="target" @change="onChange"></component>
</keep-alive>
</transition>
</div>
<script>
const Foo = {
name: "foo",
template: `<div class="link" @click="$emit('change', 'bar')">Go to Bar</div>`
};
const Bar = {
name: "bar",
template: `<div class="link" @click="$emit('change', 'foo')">Go to Foo</div>`
};
Vue.component("foo", Foo);
Vue.component("bar", Bar);
const app = new Vue({
data: {
target: "foo"
},
methods: {
onChange(target) {
this.target = target;
}
}
}).$mount("#app");
</script>
</body>
</html>
๋๋ฒ๊น
ํ๋ก์ธ์ค๋ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
1 "์ฐ๋ ๊ธฐ ์์ง"๋ฐ "ํ ์ค๋
์ท ์์ฑ"(์ค๋
์ท 1)์ ํด๋ฆญํฉ๋๋ค.
2 ์ผ์ชฝ์ ๋ผ์ฐํ
๋ฒํผ์ 10 ๋ฒ ํด๋ฆญ ํ ๋ค์ "์ฐ๋ ๊ธฐ ์์ง"๋ฐ "ํ ์ค๋
์ท ๊ฐ์ ธ ์ค๊ธฐ"(์ค๋
์ท 2)๋ฅผ ํด๋ฆญํฉ๋๋ค.
3 ์ผ์ชฝ์ ๋ผ์ฐํ
๋ฒํผ์ 10 ๋ฒ ํด๋ฆญ ํ ๋ค์ "์ฐ๋ ๊ธฐ ์์ง"๋ฐ "ํ ์ค๋
์ท ๊ฐ์ ธ ์ค๊ธฐ"(์ค๋
์ท 3)๋ฅผ ํด๋ฆญํฉ๋๋ค.
์์ฑ ๋ "์ค๋ ์ท"์ ๋ค์๊ณผ ๊ฐ์ต๋๋ค.
์ค๋
์ท 1 :
์ค๋
์ท 2 :
์ค๋
์ท 3 :
100 ๋ฒ ํด๋ฆญ ํ ํ :
VueComponent๊ฐ ์ฌํ์ฉ๋์ง ์์ต๋๋ค. ๋ฒ๊ทธ์ ๋๊น?
์ ์ด๋ฐ ์ผ์ด ๋ฐ์ํฉ๋๊น? ๋ฒ๊ทธ์ ๋๊น?
๊ตฌ์ฑ ์์๋ฅผ ์ ํ ํ ๋ ๊ตฌ์ฑ ์์๊ฐ ์ง์์ง์ง ์์ต๋๋ค.
๋๋ ์ด๊ฒ์ ๋ณผ ๊ฒ์ด๋ค.
๋ถ๋ชจ๋ฅผ ์ญ์ ํ๋ฉด ๋ชจ๋ ๊ตฌ์ฑ ์์๊ฐ ์บ์ ๋ vnode์ ๋ถ๋ชจ์ ์ํด ์ ์ง๋ฉ๋๋ค. ๊ทธ๋ฐ ๋ค์ ๊ตฌ์ฑ ์์๊ฐ ์ฌํ์ฉ๋ฉ๋๋ค.
๋ํ ๋ฉ๋ชจ๋ฆฌ ๋์ ๋ฌธ์ ๊ฐ ์์ต๋๋ค. https://github.com/bootstrap-vue/bootstrap-vue/issues/4214 ๋ฅผ ์ฐธ์กฐํ์ญ์์ค.
jsfiddle์ ๋ง๋ค๋ ค๊ณ ํ์ง๋ง ์บ์ฑ ๋์์ ๋ณต์ ํ๋ ๋ฐฉ๋ฒ์ ๋ชจ๋ฅด๊ฒ ์ต๋๋ค.
์ด๋ด ์, ์์ ์์ด์? ์ด ์ ๋ฐ์ดํธ๊ฐ ์ด๋ฏธ ๋ง์คํฐ ๋ธ๋์น์ ๋ณํฉ ๋์์ต๋๊น? ๋๋ ๊ฐ์ ๋ฌธ์ ๋ฅผ ๊ฐ์ง๊ณ ์๋ค.
์ด ๋ฌธ์ ์ ๋ํ ์ ๋ฐ์ดํธ๋ฅผ๋ณด๊ณ ์ถ์ต๋๋ค. PR์ด ์์ง๋ง ์ฃฝ์ ๊ฒ ๊ฐ์ต๋๊น?
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
์ด ๋ฌธ์ ์ ๋ํ ์ ๋ฐ์ดํธ๋ฅผ๋ณด๊ณ ์ถ์ต๋๋ค. PR์ด ์์ง๋ง ์ฃฝ์ ๊ฒ ๊ฐ์ต๋๊น?