一、scoped解决样式冲突
默认情况:写在组件中的样式会 全局生效→ 因此很容易造成多个组件之间的样式冲突问题。
1.全局样式:默认组件中的样式会作用到全局
2.局部样式:可以给组件加上 scoped 属性,可以让样式只作用于当前组件
scoped原理?
1.当前组件内标签都被添加 data-v-hash值 的属性
2.css选择器都被添加 [data-v-hash值]的属性选择器最终效果:必须是当前组件的元素,才会有这个自定义属性,才会被这个样式作用到
两个自定义组件
BaseOne.vue
<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>BaseTwo.vue
<template>
<div class="base-one">
BaseTwo
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
div{
border: 3px solid red;
margin: 30px;
}
</style>App.vue
<template>
<div id="app">
<BaseOne></BaseOne>
<BaseTwo></BaseTwo>
</div>
</template>
<script>
import BaseOne from './components/BaseOne'
import BaseTwo from './components/BaseTwo'
export default {
name: 'App',
components: {
BaseOne,
BaseTwo
}
}
</script>
main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')
效果（注意：未添加scoped属性！）：
二、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: 100,
// }
// },
data: function () {
return {
count: 100,
}
},
}
</script>
<style>
.base-count {
margin: 20px;
}
</style>App.vue
<template>
<div class="app">
<baseCount></baseCount>
<baseCount></baseCount>
<baseCount></baseCount>
</div>
</template>
<script>
import baseCount from './components/BaseCount'
export default {
components: {
baseCount,
},
}
</script>
<style>
</style>
效果（三个count是独立的，互不影响的）：
三、组件通信
组件通信，就是指 组件与组件 之间的数据传递。
- 组件的数据是独立的，无法直接访问其他组件的数据。
- 想用其他组件的数据 →组件通信
不同的组件关系和组件通信方案分类
1.组件关系分类：
①.父子关系（图中B和C组件和A组件构成父子关系）
②.非父子关系（组件B与C构成非父子关系）
2.组件通信解决方案：
①.父子关系：props和$emit
②.非父子关系：provide&inject / eventbus
③.通用解决方案：Vuex（适合复杂业务场景）
3.父子通信流程图：
①父组件通过props将数据传递给子组件
②子组件利用$emit通知父组件修改更新
核心代码实现：
父传子
子传父
4.父子通信方案的核心流程
父传子props:
① 父中给子添加属性传值 ② 子props 接收 ③ 使用
子传父$emit:
① 子$emit 发送消息 ②父中给子添加消息监听 ③ 父中实现处理函数
5.prop 详解
Prop定义：组件上注册的一些自定义属性
Prop作用：向子组件传递数据
特点：
- 可以传递任意数量的prop
- 可以传递任意类型的prop （字符串，整型，布尔，对象，数组）
案例：
<template>
<div class="app">
<UserInfo
:username="username"
:age="age"
:isSingle="isSingle"
:car="car"
:hobby="hobby"
></UserInfo>
</div>
</template>
<script>
import UserInfo from './components/UserInfo.vue'
export default {
data() {
return {
username: '小帅',
age: 28,
isSingle: true,
car: {
brand: '宝马',
},
hobby: ['篮球', '足球', '羽毛球'],
}
},
components: {
UserInfo,
},
}
</script>
<style>
</style><template>
<div class="userinfo">
<h3>我是个人信息组件</h3>
<div>姓名：{{username}}</div>
<div>年龄：{{age}}</div>
<div>是否单身：{{isSingle}}</div>
<div>座驾：{{car.brand}}</div>
<div>兴趣爱好：{{hobby.join('、')}}</div>
</div>
</template>
<script>
export default {
props:['username','age','isSingle','car','hobby']
}
</script>
<style>
.userinfo {
width: 300px;
border: 3px solid #000;
padding: 20px;
}
.userinfo > div {
margin: 20px 10px;
}
</style>6.props校验
思考：组件的prop可以乱传么？
作用：为组件的prop指定验证要求，不符合要求，控制台就会有错误提示-->帮助开发者，快速发现错误
语法：
①类型校验
②非空校验③默认值
④自定义校验
代码：
BaseProgress.vue
<template>
<div class="base-progress">
<div class="inner" :style="{ width: w + '%' }">
<span>{{ w }}%</span>
</div>
</div>
</template>
<script>
export default {
// 1.基础写法（类型校验）
// props: {
// w: Number,
// },
// 2.完整写法（类型、默认值、非空、自定义校验）
props: {
w: {
type: Number,
required: true,
default: 0,
validator(val) {
// console.log(val)
if (val >= 100 || val <= 0) {
console.error('传入的范围必须是0-100之间')
return false
} else {
return true
}
},
},
},
}
</script>
<style scoped>
.base-progress {
height: 26px;
width: 400px;
border-radius: 15px;
background-color: #272425;
border: 3px solid #272425;
box-sizing: border-box;
margin-bottom: 30px;
}
.inner {
position: relative;
background: #379bff;
border-radius: 15px;
height: 25px;
box-sizing: border-box;
left: -3px;
top: -2px;
}
.inner span {
position: absolute;
right: 0;
top: 26px;
}
</style>7.单项数据流
prop & data
共同点:都可以给组件提供数据。
区别:
- data 的数据是自己的 → 随便改
- prop 的数据是外部的 →不能直接改，要遵循 单向数据流
单向数据流:父级 prop 的数据更新，会向下流动，影响子组件。这个数据流动是单向的。
口诀：谁的数据，谁负责。
代码：
<template>
<div class="base-count">
<button @click="handleSub">-</button>
<span>{{ count }}</span>
<button @click="handleAdd">+</button>
</div>
</template>
<script>
export default {
// 1.自己的数据随便修改 （谁的数据 谁负责）
// data () {
// return {
// count: 100,
// }
// },
// 2.外部传过来的数据 不能随便修改
props: {
count: {
type: Number,
},
},
methods: {
handleSub() {
this.$emit('changeCount', this.count - 1)
},
handleAdd() {
this.$emit('changeCount', this.count + 1)
},
},
}
</script>
<style>
.base-count {
margin: 20px;
}
</style><template>
<div class="app">
<BaseCount :count="count" @changeCount="handleChange"></BaseCount>
</div>
</template>
<script>
import BaseCount from './components/BaseCount.vue'
export default {
components:{
BaseCount
},
data(){
return {
count:100
}
},
methods:{
handleChange(newVal){
// console.log(newVal);
this.count = newVal
}
}
}
</script>
<style>
</style>
