Vue2:组件基础(下)
Date: April 12, 2023
Sum: props验证、计算属性、自定义时间、组件上的v-model、任务列表案例
Tags: *
目标:
能够知道如何对 props 进行验证
能够知道如何使用计算属性
令能够知道如何为组件自定义事件
令能够知道如何在组件上使用 v-model
props 验证
- 什么是 props 验证
概念:封装组件时对外界传递过来的 props 数据进行合法性的校验,从而防止数据不合法的问题。
使用数组类型的 props 节点的缺点:无法为每个 prop 指定具体的数据类型。
- 对象类型的 props 节点
使用对象类型的 props 节点,可以对每个 prop 进行数据类型的校验,示意图如下:
- props 验证
对象类型的 props 节点提供了多种数据验证方案,例如:
① 基础的类型检查 ② 多个可能的类型 ③ 必填项校验 ④ 属性默认值 ⑤ 自定义验证函数
3.1 基础的类型检查
可以直接为组件的 prop 属性指定基础的校验类型,从而防止组件的使用者为其绑定错误类型的数据:
3.2 多个可能的类型
如果某个 prop 属性值的类型不唯一,此时可以通过数组的形式,为其指定多个可能的类型,示例代码如下:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F6H4rcVn-1691303451848)(https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/Untitled%203.png)]
3.3 必填项校验
如果组件的某个 prop 属性是必填项,必须让组件的使用者为其传递属性的值。此时,可以通过如下的方式将其设置为必填项:
export default {name: 'MyCount',props: {count: {type: Number,required: true //设定required},state: Boolean,}
}
3.4 属性默认值
在封装组件时,可以为某个 prop 属性指定默认值。示例代码如下:
export default {name: 'MyCount',props: {// 通过“配置对象”的形式,来定义 propC 属性的“验证规则”count: {type: Number,default: 100, // 如果使用者没有指定 default 的值,则 count 属性的值默认为 100required: true },state: Boolean,}
}
3.5 自定义验证函数
封装组件时,可以为 prop 属性指定自定义的验证函数,从而对 prop 属性的值进行更加精确的控制
个人总结:
props验证
概念:封装组件时对外界传递过来的 props 数据进行合法性的校验,从而防止数据不合法的问题。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QAPgtspB-1691303451848)(https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/Untitled.png)]
解决方案:采用对象类型的 props 节点
自定义事件👌
自定义事件概念:
概念:自定义事件让使用者可以监听到组件内最新的数据变化
语法:
<my-counter @自定义事件="监听方式"></my-counter> // App.vue
注意:通过自定义事件可以在App.vue中监听MyCounter组件中数据的变化。
自定义事件使用步骤
自定义事件的 3 个使用步骤:
在封装组件时:
① 声明自定义事件:在emits 节点中声明
② 触发自定义事件:通过 this.$emit(‘自定义事件的名称’) 方法进行触发
在使用组件时:
③ 监听自定义事件:通过 v-on 的形式监听自定义事件
传参方式:
在调用 this.$emit() 方法触发自定义事件时,可以通过第 2 个参数为自定义事件传参
//counter.vue
methods: {add() {this.count++this.$emit('countChange',this.count) // 触发自定义事件,通过第二个参数传参}
}
结合例子理解:
Counter.vue
<template><div><p>Counter的值是:{{ count }}</p><button @click="add">+1</button></div>
</template><script>
export default {name: 'MyCounter',// 1-声明自定义事件emits: ['countChange'],data() { return {count: 1,}},methods: {add() {this.count++// 2-触发自定义事件,通过第二个参数传参this.$emit('countChange',this.count) }}
}
</script>
App.vue
<template><div><h1>app 根组件</h1><hr/><!-- 3-监听自定义事件(左:自定义事件 右:监听方式) --><my-counter @countChange="getCount"></my-counter></div>
</template><script>
import MyCounter from './counter.vue'
export default {name: 'MyApp',methods: {getCount(val) {console.log("触发了 countChange 自定义事件", val);}},components: {MyCounter},
}
</script>
组件上的 v-model
1. 为什么需要在组件上使用 v-model
v-model 是双向数据绑定指令,当需要维护组件内外数据的同步时,可以在组件上使用 v-model 指令。示意图如下:
外界数据的变化会自动同步到 counter 组件中 ; counter 组件中数据的变化,也会自动同步到外界
理解:父组件和子组件中数据的变化会相互影响
2. 在组件上使用 v-model 的步骤
2.1 父向子传递数据
① 父组件通过 v-bind: 属性绑定的形式,把数据传递给子组件
② 子组件中,通过 props 接收父组件传递过来的数据
案例:
<template><div><h1>App根组件 --- {{ count }}</h1><button @click="count += 1">+1</button><hr/><my-counter :number="count"></my-counter> //通过v-bind属性将count值传递给number</div>
</template>
2.2 子向父传递数据
① 在 v-bind: 指令之前添加 v-model 指令
② 在子组件中声明 emits 自定义事件,格式为 update:xxx
③ 调用 $emit() 触发自定义事件,更新父组件中的数据
案例:
// App.vue
<template><div><h1>App 根组件 ---- {{count}}</h1><button @click="count += 1">+1</button><hr /><my-counter v-model:number="count"></my-counter></div>
</template>
// Counter.vue
<template><div><p>count值是:{{number}}</p><button @click="add">+1</button></div>
</template><script>
export default {name: 'MyCounter',props: ['number'],emits: ['update:number'],methods: {add() {this.$emit('update:number', this.number + 1)}}
}
</script>
效果:
子父组件中数据同步
个人总结:
综合案例:
成绩案例:
功能描述:
1.渲染功能
2.删除功能
3.添加功能
4.统计总分,求平均分
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9NUG2Kst-1691303451849)(https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/Untitled%2011.png)]
思路分析:
1.渲染功能 v-for :key v-bind:动态绑定class的样式
2.删除功能 v-on绑定事件, 阻止a标签的默认行为
3.v-model的修饰符 .trim、 .number、 判断数据是否为空后 再添加、添加后清空文本框的数据
4.使用计算属性computed 计算总分和平均分的值
业务技术总结;
1-渲染功能(不及格高亮)
v-if v-else v-for v-bind:class
2-删除功能
点击传参 filter过滤覆盖原数组
.prevent 阻止默认行为
3-添加功能
v-model v-model修饰符(.trim .number)
unshift 修改数组更新视图
代码:
-
Code: 渲染实现
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="./styles/index.css" /><title>Document</title></head><body><div id="app" class="score-case"><div class="table"><table><thead><tr><th>编号</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody v-if="list.length > 0"><tr v-for="(item, index) in list" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.subject }}</td><!-- 需求:不及格的标红, < 60 分, 加上 red 类 --><td :class="{ red: item.score < 60 }">{{ item.score }}</td><td><a href="#">删除</a></td></tr></tbody><tbody v-else><tr><td colspan="5"><span class="none">暂无数据</span></td></tr></tbody><tfoot><tr><td colspan="5"><span>总分:246</span><span style="margin-left: 50px">平均分:79</span></td></tr></tfoot></table></div><div class="form"><div class="form-item"><div class="label">科目:</div><div class="input"><inputtype="text"placeholder="请输入科目"/></div></div><div class="form-item"><div class="label">分数:</div><div class="input"><inputtype="text"placeholder="请输入分数"/></div></div><div class="form-item"><div class="label"></div><div class="input"><button class="submit" >添加</button></div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {list: [{ id: 1, subject: '语文', score: 62 },{ id: 7, subject: '数学', score: 39 },{ id: 12, subject: '英语', score: 70 },],subject: '',score: ''}})</script></body> </html>
-
Code: 删除添加
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="./styles/index.css" /><title>Document</title></head><body><div id="app" class="score-case"><div class="table"><table><thead><tr><th>编号</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody v-if="list.length > 0"><tr v-for="(item, index) in list" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.subject }}</td><!-- 需求:不及格的标红, < 60 分, 加上 red 类 --><td :class="{ red: item.score < 60 }">{{ item.score }}</td><td><a @click.prevent="del(item.id)" href="http://www.baidu.com">删除</a></td></tr></tbody><tbody v-else><tr><td colspan="5"><span class="none">暂无数据</span></td></tr></tbody><tfoot><tr><td colspan="5"><span>总分:246</span><span style="margin-left: 50px">平均分:79</span></td></tr></tfoot></table></div><div class="form"><div class="form-item"><div class="label">科目:</div><div class="input"><inputtype="text"placeholder="请输入科目"v-model.trim="subject"/></div></div><div class="form-item"><div class="label">分数:</div><div class="input"><inputtype="text"placeholder="请输入分数"v-model.number="score"/></div></div><div class="form-item"><div class="label"></div><div class="input"><button @click="add" class="submit" >添加</button></div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {list: [{ id: 1, subject: '语文', score: 62 },{ id: 7, subject: '数学', score: 39 },{ id: 12, subject: '英语', score: 70 },],subject: '',score: ''},methods: {del (id) {// console.log(id)this.list = this.list.filter(item => item.id !== id)},add () {if (!this.subject) {alert('请输入科目')return}if (typeof this.score !== 'number') {alert('请输入正确的成绩')return}this.list.unshift({id: +new Date(),subject: this.subject,score: this.score})this.subject = ''this.score = ''}}})</script></body> </html>
-
Code: 计算属性
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><link rel="stylesheet" href="./styles/index.css" /><title>Document</title></head><body><div id="app" class="score-case"><div class="table"><table><thead><tr><th>编号</th><th>科目</th><th>成绩</th><th>操作</th></tr></thead><tbody v-if="list.length > 0"><tr v-for="(item, index) in list" :key="item.id"><td>{{ index + 1 }}</td><td>{{ item.subject }}</td><!-- 需求:不及格的标红, < 60 分, 加上 red 类 --><td :class="{ red: item.score < 60 }">{{ item.score }}</td><td><a @click.prevent="del(item.id)" href="http://www.baidu.com">删除</a></td></tr></tbody><tbody v-else><tr><td colspan="5"><span class="none">暂无数据</span></td></tr></tbody><tfoot><tr><td colspan="5"><span>总分:{{ totalScore }}</span><span style="margin-left: 50px">平均分:{{ averageScore }}</span></td></tr></tfoot></table></div><div class="form"><div class="form-item"><div class="label">科目:</div><div class="input"><inputtype="text"placeholder="请输入科目"v-model.trim="subject"/></div></div><div class="form-item"><div class="label">分数:</div><div class="input"><inputtype="text"placeholder="请输入分数"v-model.number="score"/></div></div><div class="form-item"><div class="label"></div><div class="input"><button @click="add" class="submit" >添加</button></div></div></div></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {list: [{ id: 1, subject: '语文', score: 62 },{ id: 7, subject: '数学', score: 89 },{ id: 12, subject: '英语', score: 70 },],subject: '',score: ''},computed: {totalScore() {return this.list.reduce((sum, item) => sum + item.score, 0)},averageScore () {if (this.list.length === 0) {return 0}return (this.totalScore / this.list.length).toFixed(2)}},methods: {del (id) {// console.log(id)this.list = this.list.filter(item => item.id !== id)},add () {if (!this.subject) {alert('请输入科目')return}if (typeof this.score !== 'number') {alert('请输入正确的成绩')return}this.list.unshift({id: +new Date(),subject: this.subject,score: this.score})this.subject = ''this.score = ''}}})</script></body> </html>
总结:
① 能够知道如何对 props 进行验证
数组格式、对象格式
type、default、required、validator
② 能够知道如何使用计算属性
computed 节点、必须 return 一个结果、缓存计算结果
③ 能够知道如何为组件绑定自定义事件
v-on 绑定自定义事件、emits、$emit()
④ 能够知道如何在组件上使用 v-model
应用场景:实现组件内外的数据同步
v-model:props名称、emits、$emit(‘update:props名称’)