大家好, Capybara 将继续与大家一起学习Vue框架。今天依旧是大家的 编程学习小伙伴、前端学习体验家、网课资源品鉴官。
day04
组件的三大组成部分 (结构/样式/逻辑)
scoped样式冲突
当style标签不加scoped
1.style中的样式 默认是作用到全局的
2.加上scoped可以让样式变成局部样式
组件都应该有独立的样式,推荐加scoped(原理)
-----------------------------------------------------
scoped原理:
1.给当前组件模板的所有元素,都会添加上一个自定义属性
data-v-hash值
data-v-5f6a9d56 用于区分开不同的组件
2.css选择器后面,被自动处理,添加上了属性选择器
div[data-v-5f6a9d56]
代码:
<template>
<div class="base-one">
BaseOne
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
/*
1.style中的样式 默认是作用到全局的
2.加上scoped可以让样式变成局部样式
组件都应该有独立的样式,推荐加scoped(原理)
-----------------------------------------------------
scoped原理:
1.给当前组件模板的所有元素,都会添加上一个自定义属性
data-v-hash值
data-v-5f6a9d56 用于区分开不通的组件
2.css选择器后面,被自动处理,添加上了属性选择器
div[data-v-5f6a9d56]
*/
div{
border: 3px solid blue;
margin: 30px;
}
</style>
data是一个函数
一个组件的 data 选项必须是一个函数。→ 保证每个组件实例,维护独立的一份数据对象。
每次创建新的组件实例,都会新执行一次 data 函数,得到一个新对象。
实操代码:
BaseCount.vue
<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: 999,
// }
// },
data: function () {
return {
count: 999,
}
},
}
</script>
<style>
.base-count {
margin: 20px;
}
</style>
在App.vue中注册使用三个BaseCount:
效果:
控制台:
组件通信
什么是组件通信?
父子组件通信
父传子
实操代码:
效果:
子传父
实操代码:
效果:
props详解
什么是 prop
props 校验
实操
正确传值:
错误传值(无错误提示):
类型校验
添加校验(类型校验):