当前位置：首页 > news >正文

六、vue进阶知识点

news 来源：原创 2024/9/19 5:48:38

一、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 = falsenew 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>