动态组件切换,保留上一个组件的状态值
html
<body>
<div id="app">
<div id="change">
<input type="radio" id="one" value="child1" v-model="picked">
<label for="one">child1</label>
<br>
<input type="radio" id="two" value="child2" v-model="picked">
<label for="two">child2</label>
<br>
</div>
<keep-alive>
<component :is="picked" />
</keep-alive>
</div>
</body>
js
<script>
Vue.component('child1', {
template: `
<div>
<input v-model="inputMsg"/>
<p>子组件一:{{inputMsg}}</p>
</div>
`,
data() {
return {
inputMsg: ''
}
}
})
Vue.component('child2', {
template: `
<div>
<button @click="count++">自增</button>
<p>数值:{{count}}</p>
</div>
`,
data() {
return {
count: 0
}
}
})
const vm = new Vue({
el: '#app',
data: {
picked: 'child1'
}
})
</script>