1.1 默认情况：
写在组件中的样式会 全局生效 → 因此很容易造成多个组件之间的样式冲突问题。
- 全局样式: 默认组件中的样式会作用到全局，任何一个组件中都会受到此样式的影响
- 局部样式: 可以给组件加上scoped 属性,可以让样式只作用于当前组件
1.2 代码演示
BaseOne.vue
<template> <div class="base-one"> BaseOne </div> </template> <script> export default { } </script> <style scoped> </style>
BaseTwo.vue
<template> <div class="base-one"> BaseTwo </div> </template> <script> export default { } </script> <style scoped> </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>
1.3 scoped原理
- 当前组件内标签都被添加data-v-hash值 的属性
- css选择器都被添加 [data-v-hash值] 的属性选择器
最终效果: 必须是当前组件的元素, 才会有这个自定义属性, 才会被这个样式作用到
1.4 总结
- style的默认样式是作用到哪里的？
- scoped的作用是什么？
- style中推不推荐加scoped？
2 组件基础知识data必须是一个函数
2.1 data为什么要写成函数
一个组件的 data 选项必须是一个函数。目的是为了：保证每个组件实例，维护独立的一份数据对象。
每次创建新的组件实例，都会新执行一次data 函数，得到一个新对象。
2.2 代码演示
BaseCount.vue
<template> <div class="base-count"> <button @click="count--">-</button> <span>{{ count }}</span> <button @click="count++">+</button> </div> </template> <script> export default { data: function () { return { count: 100, } }, } </script> <style> .base-count { margin: 20px; } </style>
App.vue
<template> <div class="app"> <BaseCount></BaseCount> </div> </template> <script> import BaseCount from './components/BaseCount' export default { components: { BaseCount, }, } </script> <style> </style>
2.3 总结
data写成函数的目的是什么？
3 组件通信
3.1 什么是组件通信？
组件通信，就是指组件与组件之间的数据传递
- 组件的数据是独立的，无法直接访问其他组件的数据。
- 想使用其他组件的数据，就需要组件通信
3.2 组件之间如何通信
思考：
- 组件之间有哪些关系？
- 对应的组件通信方案有哪几类？
3.3 组件关系分类
- 父子关系
- 非父子关系
3.4 通信解决方案
3.5 父子通信流程
- 父组件通过 props 将数据传递给子组件
- 子组件利用 $emit 通知父组件修改更新
3.6 父向子通信代码示例
父组件通过props将数据传递给子组件
父组件App.vue
<template> <div class="app" style="border: 3px solid #000; margin: 10px"> 我是APP组件 <Son></Son> </div> </template> <script> import Son from './components/Son.vue' export default { name: 'App', data() { return { myTitle: '学前端，就来黑马程序员', } }, components: { Son, }, } </script> <style> </style>
子组件Son.vue
<template> <div class="son" style="border:3px solid #000;margin:10px"> 我是Son组件 </div> </template> <script> export default { name: 'Son-Child', } </script> <style> </style>
父向子传值步骤
- 给子组件以添加属性的方式传值
- 子组件内部通过props接收
- 模板中直接使用 props接收的值
3.7 子向父通信代码示例
子组件利用 $emit 通知父组件，进行修改更新
子向父传值步骤
- $emit触发事件，给父组件发送消息通知
- 父组件监听$emit触发的事件
- 提供处理函数，在函数的性参中获取传过来的参数
3.8 总结
- 组件关系分类有哪两种
- 父子组件通信的流程是什么？
- 父向子
- 子向父
4 什么是props
4.1.Props 定义
组件上 注册的一些 自定义属性
4.2.Props 作用
向子组件传递数据
4.3.特点
- 可以 传递 任意数量 的prop
- 可以 传递 任意类型 的prop
4.4.代码演示
父组件App.vue
<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>
子组件UserInfo.vue
<template> <div class="userinfo"> <h3>我是个人信息组件</h3> <div>姓名：</div> <div>年龄：</div> <div>是否单身：</div> <div>座驾：</div> <div>兴趣爱好：</div> </div> </template> <script> export default { } </script> <style> .userinfo { width: 300px; border: 3px solid #000; padding: 20px; } .userinfo > div { margin: 20px 10px; } </style>
5 props校验
5.1.思考
组件的props可以乱传吗
5.2.作用
为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示 → 帮助开发者，快速发现错误
5.3.语法
- 类型校验
- 非空校验
- 默认值
- 自定义校验
5.4.代码演示
App.vue
<template> <div class="app"> <BaseProgress :w="width"></BaseProgress> </div> </template> <script> import BaseProgress from './components/BaseProgress.vue' export default { data() { return { width: 30, } }, components: { BaseProgress, }, } </script> <style> </style>
BaseProgress.vue
<template> <div class="base-progress"> <div class="inner" :style="{ width: w + '%' }"> <span>{{ w }}%</span> </div> </div> </template> <script> export default { props: ['w'], } </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>
