问题遇到的现象和发生背景
为什么组件名 @click="com='Left'" 和 com: 'Right' ,要加引号扩起来?
问题相关代码,请勿粘贴截图
<template>
<div class="app-container">
<h1>App 根组件</h1>
<hr />
<button @click="com='Left'">显示Left</button>
<button @click="com='Right'">显示Right</button>
<div class="box">
<keep-alive>
<component :is="com"></component>
</keep-alive>
</div>
</div>
</template>
<script>
import Left from './components/Left.vue'
import Right from './components/Right.vue'
export default {
data() {
return {
com: 'Right'
}
},
components: {
Left,
Right
}
}
</script>
<style lang="less">
.app-container {
padding: 1px 20px 20px;
background-color: #efefef;
}
.box {
display: flex;
}
</style>