(创作不易,感谢有你,你的支持,就是我前行的最大动力,如果看完对你有帮助,请留下您的足迹)
目录
组件的三大组成部分
注意点说明
组件的样式冲突 scoped
data 是一个函数
<template>
<div class="base-count">
<button @click="count--">-</button>
<span>{{ count }}</span>
<button @click="count++">+</button>
</div>
</template>
<script>
export default {
data() {
console.log('函数执行了')
return {
count: 100,
}
},
}
</script>
<style>
.base-count {
margin: 20px;
}
</style>
<template>
<div class="app">
<baseCount></baseCount>
</div>
</template>
<script>
import baseCount from './components/BaseCount'
export default {
components: {
baseCount,
},
}
</script>
<style>
</style>
组件通信
什么是组件通信
不同的组件关系 和 组件通信方案分类
组件通信解决方案: