Vue2:组件基础(下)

Vue2:组件基础(下)

Date: April 12, 2023
Sum: props验证、计算属性、自定义时间、组件上的v-model、任务列表案例
Tags: *


目标:

能够知道如何对 props 进行验证

能够知道如何使用计算属性

令能够知道如何为组件自定义事件

令能够知道如何在组件上使用 v-model




props 验证

  1. 什么是 props 验证

概念:封装组件时对外界传递过来的 props 数据进行合法性的校验,从而防止数据不合法的问题。

Untitled

使用数组类型的 props 节点的缺点:无法为每个 prop 指定具体的数据类型。

  1. 对象类型的 props 节点

使用对象类型的 props 节点,可以对每个 prop 进行数据类型的校验,示意图如下:

Untitled

  1. props 验证

对象类型的 props 节点提供了多种数据验证方案,例如:

① 基础的类型检查 ② 多个可能的类型 ③ 必填项校验 ④ 属性默认值 ⑤ 自定义验证函数

3.1 基础的类型检查

可以直接为组件的 prop 属性指定基础的校验类型,从而防止组件的使用者为其绑定错误类型的数据:

Untitled

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 属性的值默认为 100
      required: true 
    },
    state: Boolean,
  }
}

3.5 自定义验证函数

封装组件时,可以为 prop 属性指定自定义的验证函数,从而对 prop 属性的值进行更加精确的控制

Untitled



个人总结:

props验证

概念:封装组件时对外界传递过来的 props 数据进行合法性的校验,从而防止数据不合法的问题。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-QAPgtspB-1691303451848)(https://nathan-blog-img.oss-cn-nanjing.aliyuncs.com/blog_img/Untitled.png)]

解决方案:采用对象类型的 props 节点

Untitled




自定义事件👌

自定义事件概念:

概念:自定义事件让使用者可以监听到组件内最新的数据变化

语法

Untitled

<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 指令。示意图如下:

Untitled

外界数据的变化会自动同步到 counter 组件中 ; counter 组件中数据的变化,也会自动同步到外界

理解:父组件和子组件中数据的变化会相互影响

2. 在组件上使用 v-model 的步骤

2.1 父向子传递数据

Untitled

① 父组件通过 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>

Untitled


2.2 子向父传递数据

Untitled

① 在 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>

效果:

子父组件中数据同步

Untitled



个人总结:




综合案例:

成绩案例:

功能描述

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">
                <input
                  type="text"
                  placeholder="请输入科目"
                />
              </div>
            </div>
            <div class="form-item">
              <div class="label">分数:</div>
              <div class="input">
                <input
                  type="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">
                <input
                  type="text"
                  placeholder="请输入科目"
                  v-model.trim="subject"
                />
              </div>
            </div>
            <div class="form-item">
              <div class="label">分数:</div>
              <div class="input">
                <input
                  type="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">
                <input
                  type="text"
                  placeholder="请输入科目"
                  v-model.trim="subject"
                />
              </div>
            </div>
            <div class="form-item">
              <div class="label">分数:</div>
              <div class="input">
                <input
                  type="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名称’)

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值