组件拆分:页面不同功能部分拆分为不同文件,也就是不同组件
1. 基本用法
(1)定义组件Count.vue
<template>
<div>
<button @click="add"> 点击次数{{ count }} </button>
</div>
</template>
<script>
export default {
name: "Count",
data(){
return{
count: 0
}
},
methods:{
add(){
this.count++
}
}
}
</script>
<style scoped>
</style>
(2)使用组件 app.vue
<template>
<div id="app">
<Count></Count>
</div>
</template>
<script>
// 引入组件
import Count from "./components/Count";
export default {
// 注册组件
components:{
Count
}
}
</script>