组件部分
<template>
<div>
<div class="five-com">
<button @click="num++">{{ num }}</button>
</div>
</div>
</template>
<script>
export default {
/*面试题:为什么data是函数类型?因为组件被复用的时候,每次调用
data函数,都会返回一个全新的对象 所以即使调用了三次组件
点击num++时,不会对其他组件有影响*/
data() {
return {
num: 10,
};
},
};
</script>
<style lang="scss" scoped>
.five-com {
border: 2px solid red;
}
</style>
App.vue
<template>
<div>
/*三个都是一样的组件 点击后为什么三个不一起num++*/
/*面试题:为什么data是函数类型?因为组件被复用的时候,每次调用
data函数,都会返回一个全新的对象 所以即使调用了三次组件
点击num++时,不会对其他组件有影响*/
<five-com />
<five-com />
<five-com />
</div>
</template>
<script>
import FiveCom from "./components/FiveCom.vue";
export default {
components: { FiveCom },
};
</script>
<style lang="scss" scoped>
</style>