AI 助理
备案控制台
开发者社区 云计算 文章 正文

Vue2：组件基础（下）

2023-09-14 50
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue2：组件基础（下）

Vue2：组件基础（下）

Date: April 12, 2023

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

Tags: *


目标：

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


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


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


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


props 验证

1.什么是 props 验证

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

a195596e222837ced9addc65c175a4d9.png

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


1.对象类型的 props 节点

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

61606f67ff38ccc37ab8b350c9ada5af.png

1.props 验证

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


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


3.1 基础的类型检查


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

33605745c4d7f13d5de36db74d89db2e.png

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 属性的值进行更加精确的控制

4e4faf2380464e65bdebe134d6f54462.png

个人总结：

props验证


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


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

01a6753d6e3d36826554e2decb5d527a.png


自定义事件👌

自定义事件概念：

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


语法：

cbc3cc8699c380589a21f473db2dd7bf.png

<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) // 触发自定义事件，通过第二个参数传参
  }
}

结合例子理解：

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

e9ad6366ea69c713e13582a2b060067f.png

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


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


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


2.1 父向子传递数据

c716997f9f5df520f3bb841a3f6d4b10.png

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

52df8fa438681cdabad586a4106545a6.png

2.2 子向父传递数据

e4dfbb8330899216fb5098efc0f97ea9.png

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

效果：


子父组件中数据同步

61c5a4780220e9aed34c9c885b419943.png


个人总结：


综合案例：

成绩案例：

功能描述：


1.渲染功能


2.删除功能


3.添加功能


4.统计总分，求平均分


思路分析：


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名称’)


文章标签：
缓存
关键词：
VUE.js组件
CaptainDrake
目录
相关文章
dufadayang
|
22天前
|
JavaScript
在 Vue 中处理组件选项与 Mixin 选项冲突的详细解决方案
【10月更文挑战第18天】通过以上的分析和探讨，相信你对在 Vue 中使用 Mixin 时遇到组件选项与 Mixin 选项冲突的解决方法有了更深入的理解。在实际开发中，要根据具体情况灵活选择合适的解决方案，以确保代码的质量和可维护性。
dufadayang
75 7
html的七十二变
|
5天前
|
存储 JavaScript 开发者
Vue 组件间通信的最佳实践
本文总结了 Vue.js 中组件间通信的多种方法，包括 props、事件、Vuex 状态管理等，帮助开发者选择最适合项目需求的通信方式，提高开发效率和代码可维护性。
html的七十二变
17 5
html的七十二变
|
5天前
|
存储 JavaScript
Vue 组件间如何通信
Vue组件间通信是指在Vue应用中，不同组件之间传递数据和事件的方法。常用的方式有：props、自定义事件、$emit、$attrs、$refs、provide/inject、Vuex等。掌握这些方法可以实现父子组件、兄弟组件及跨级组件间的高效通信。
html的七十二变
14 4
dufadayang
|
21天前
|
缓存 JavaScript UED
Vue 的动态组件与 keep-alive
【10月更文挑战第19天】总的来说，动态组件和 `keep-alive` 是 Vue.js 中非常实用的特性，它们为我们提供了更灵活和高效的组件管理方式，使我们能够更好地构建复杂的应用界面。深入理解和掌握它们，以便在实际开发中能够充分发挥它们的优势，提升我们的开发效率和应用性能。
dufadayang
43 18
大树营养快线
|
16天前
|
缓存 JavaScript UED
Vue 中实现组件的懒加载
【10月更文挑战第23天】组件的懒加载是 Vue 应用中提高性能的重要手段之一。通过合理运用动态导入、路由配置等方式，可以实现组件的按需加载，减少资源浪费，提高应用的响应速度和用户体验。在实际应用中，需要根据具体情况选择合适的懒加载方式，并结合性能优化的其他措施，以打造更高效、更优质的 Vue 应用。
大树营养快线
53 4
刘大猫.
|
20天前
|
前端开发 UED
vue3知识点：Suspense组件
vue3知识点：Suspense组件
刘大猫.
29 4
东方睿赢
|
19天前
|
JavaScript 前端开发 测试技术
组件化开发：创建可重用的Vue组件
【10月更文挑战第21天】组件化开发：创建可重用的Vue组件
东方睿赢
23 1
刘大猫.
|
20天前
|
JavaScript 前端开发 Java
《vue3第五章》新的组件，包含：Fragment、Teleport、Suspense
《vue3第五章》新的组件，包含：Fragment、Teleport、Suspense
刘大猫.
26 2
刘大猫.
|
20天前
|
Java
vue3知识点：Teleport组件
vue3知识点：Teleport组件
刘大猫.
25 1
html的七十二变
|
23天前
|
存储 JavaScript
Vue 组件间通信的方式有哪些？
Vue组件间通信主要通过Props、Events、Provide/Inject、Vuex（状态管理）、Ref、Event Bus等实现，支持父子组件及跨级组件间的高效数据传递与状态共享。
html的七十二变
51 4

热门文章

最新文章

  • 1
    vite 如何做到让 vue 本地开发更快速？
  • 2
    Vue 3和Element组件库的分页功能实现
  • 3
    Vue $watch监听对象属性，数组内对象属性改变
  • 4
    一文梳理Vue3核心原理
  • 5
    Vue打包后页面出现空白解决办法（臻享版）
  • 6
    【ElementUI】Vue+ElementUI多文件上传，一次请求上传多个文件！
  • 7
    自制简单的range（Vue）
  • 8
    如何在 Vue 中使用 Chart.js - 手把手教你搭可视化数据图表
  • 9
    vite原理之解析.vue文件
  • 10
    vue 里怎么使用 echarts 实现地图自动轮播功能、自定义 tooltip 悬浮位置提示、自定义 label 标签位置样式？
  • 1
    vue代码优化方案
    54
  • 2
    前端框架与库 - Vue.js基础：模板语法、数据绑定
    133
  • 3
    在Vue中，子组件向父组件传递数据
    73
  • 4
    【vue3】Argumnt of type ‘history:RouterHistory；}is not assignable to paraeter of type ‘RouterOptions‘.
    96
  • 5
    【vue3】vue3中路由hash与History的设置
    210
  • 6
    【Vue3】解决电脑分辨率125%、150%及缩放导致页面变形的问题
    1110
  • 7
    【vue】 el-table解决分页不能筛选全部数据的问题
    472
  • 8
    【vue】 vue2 监听滚动条滚动事件
    143
  • 9
    【天地图】vue 天地图 T is not defined
    173
  • 10
    【vue】 Tinymce 数据 回显问题 | 第一次正常回显后面，显示空白bug不能编辑
    608

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程
  • React 入门与实战
  • React 入门教程开发文档

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    阿里云OSS设置跨域访问