【Vue】什么是props

文章目录

  • 一、介绍
  • 二、代码示例
  • 三、props校验
  • 四、props校验完整写法
  • 五、props&data、单向数据流

一、介绍

Props 定义

组件上 注册的一些 自定义属性

Props 作用

向子组件传递数据

特点

  1. 可以 传递 任意数量 的prop
  2. 可以 传递 任意类型 的prop

68232015691

二、代码示例

父组件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>姓名：{{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>

三、props校验

组件的props可以乱传吗

作用

为组件的 prop 指定验证要求，不符合要求，控制台就会有错误提示 → 帮助开发者，快速发现错误

语法

  • 类型校验
  • 非空校验
  • 默认值
  • 自定义校验

类型校验：

把props改成对象的写法，然后在里面写上键和值就行了

68232068405

代码示例

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']
  props: {
    w: Number, // Number Boolean
  },
}
</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>

此时如果w传的不是Number类型，就会报错

image-20240131175959191

四、props校验完整写法

语法

props: {
  校验的属性名: {
	//写成一个对象的好处就是，它可以描述更详细的一些验证要求
    type: 类型,  // Number String Boolean ...，这个可以写成一个数组的形式 type: [类型1，类型2]
    required: true, // 是否必填
    default: 默认值, // 默认值
    // default后面如果是简单类型的值，可以直接写默认。如果是复杂类型的值，则需要以函数的形式return一个默认值
    default: () => {
      return {}
    },
    
    // 如果上述验证都满足不了要求，就使用validator去进行自定义校验
    // return true：通过校验。return false：没有通过校验
    // value是获取prop传的值
    validator (value) { 
      // 自定义校验逻辑
      return 是否通过校验
    }
  },
  // 如果属性只需要设置type，也可以写成：
  校验的属性名: 类型
},

没有通过自定义校验报错：

image-20240131182309840

代码示例

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

注意

1.default和required一般不同时写（因为当为必填项时，肯定是有值的）

2.default后面如果是简单类型的值，可以直接写默认。如果是复杂类型的值，则需要以函数的形式return一个默认值

五、props&data、单向数据流

共同点

都可以给组件提供数据

区别

  • data 的数据是自己的 → 随便改
  • prop 的数据是外部的 → 不能直接改，要遵循 单向数据流

单向数据流

父级props 的数据更新，会向下流动，影响子组件。这个数据流动是单向的

在第3行和第5行报错

image-20240131183455668

代码示例

App.vue

<template>
  <div class="app">
    <BaseCount></BaseCount>
  </div>
</template>

<script>
import BaseCount from './components/BaseCount.vue'
export default {
  components:{
    BaseCount
  },
  data(){
  },
}
</script>

<style>

</style>

BaseCount.vue

<template>
  <div class="base-count">
    <button @click="count--">-</button>
    <span>{{ count }}</span>
    <button @click="count++">+</button>
  </div>
</template>

<script>
export default {
  // 1.自己的数据随便修改  （谁的数据 谁负责）
   data () {
     return {
       count: 100,
     }
   },
  // 2.外部传过来的数据 不能随便修改
  // 以后关于prop的写法一律写对象，加一些要求会使组件更稳定一些
  //props: {
  //  count: {
  //    type: Number,
  //  }, 
  //}
}
</script>

<style>
.base-count {
  margin: 20px;
}
</style>
68232373422

解决办法：在要修改的地方提供对应的函数

BaseCount.vue

<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.外部（prop）传过来的数据 不能随便修改
    
  // 单项数据流：父组件的prop更新，会向下流动，影响子组件。这个数据流动是单向的
  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>

App.vue

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/680754.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

Python3数据类型(新)详细介绍

Python3数据类型(新)详细介绍

文章目录 数据类型类型查看同时多个变量赋值标准数据类型1.数字(Number)2.字符串3.bool(布尔类型)4.元组元组的运算 运算运算* 运算元组的删除 5.列表(List)查找列表修改列表列表的切片列表是可以修改的列表的追加列表的插入列表的连接列表的删除列表的清空列表的复制 6.字典查…
阅读更多...
AI绘画 Stable Diffusion 必备插件安装 菜鸟轻松成高手！

AI绘画 Stable Diffusion 必备插件安装 菜鸟轻松成高手！

一个刚学AI绘画的小菜鸟怎么快速成为Stable Diffusionde的高手&#xff1f;答案就是SD插件&#xff0c;只要学会使用SD的各种插件&#xff0c;帮你写正向和负向提示词&#xff0c;修复人脸/身体/手指&#xff0c;高清放大图片&#xff0c;指定人物pose&#xff0c;图片微调等等…
阅读更多...
MMUNet:形态学特征增强网络在结肠癌病理图像分割中的应用

MMUNet:形态学特征增强网络在结肠癌病理图像分割中的应用

MMUNet: Morphological feature enhancement network for colon cancer segmentation in pathological images. 发表在&#xff1a;Biomedical Signal Processing and Control2024--影响因子&#xff1a;3.137 南华大学的论文 论文地址&#xff1a;main.pdf (sciencedirecta…
阅读更多...
大数据基础问题：在Hive中如何实现全增量统一的UDTF、内置函数、聚合、Join等计算引擎常见算子？

大数据基础问题：在Hive中如何实现全增量统一的UDTF、内置函数、聚合、Join等计算引擎常见算子？

仁者见仁智者见智&#xff0c;每个程序员的方法都不一样&#xff0c;老的程序员和新的程序员之间的思维差距很大&#xff0c;新入公司的和老员工的代码差距也很大。 在Apache Hive中&#xff0c;实现全增量统一的用户定义表生成函数&#xff08;UDTF&#xff09;、内置函数、聚…
阅读更多...
算法：101. 对称二叉树

算法：101. 对称二叉树

对称二叉树 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;root [1,2,2,null,3,null,3] 输出&#xff1a;false提示&#xff1a; 树中节…
阅读更多...
什么是OCR转写服务？

什么是OCR转写服务？

OCR&#xff08;Optical Character Recognition&#xff0c;光学字符识别&#xff09;转写服务是一种技术&#xff0c;用于将图像或扫描文档中的文字转换为可编辑的文本格式。这项服务通过识别图像中的文字&#xff0c;并将其转换成计算机可读的文本形式&#xff0c;从而使得用…
阅读更多...
详解51种企业应用架构模式

详解51种企业应用架构模式

导读&#xff1a;企业应用包括哪些&#xff1f;它们又分别有哪些架构模式&#xff1f;世界著名软件开发大师Martin Fowler给你答案 一、什么是企业应用 我的职业生涯专注于企业应用&#xff0c;因此&#xff0c;这里所谈及的模式也都是关于企业应用的。&#xff08;企业应用还…
阅读更多...
动态组件 commponted 怎么使用

动态组件 commponted 怎么使用

优点&#xff1a; 提高代码复用性&#xff1a;通过将通用组件了逻辑封装在动态组件中&#xff0c;可以在多个地方重复使用&#xff0c;减少代码冗余。增强灵活性&#xff1a;动态组件可以根据不同的条件或状态动态切换显示内容&#xff0c;使用应用更加灵活和可定制。实现动态…
阅读更多...
【外汇天眼】正确投资理念与心态：持续赚钱的秘诀

【外汇天眼】正确投资理念与心态：持续赚钱的秘诀

许多人心怀迅速致富的梦想&#xff0c;但同时又希望通过踏实的努力实现这一目标。他们既觉得为他人工作赚取收入过于辛苦&#xff0c;又认为自己创业当老板太过劳累。 实际上&#xff0c;赚钱的方式有很多种。有人凭借智慧和知识创造财富&#xff0c;有人依靠勤劳和技术赚取收…
阅读更多...
当了程序员，才敢说的大实话（小白如何学好it）

当了程序员，才敢说的大实话（小白如何学好it）

&#x1f4e2;只有我真正当了程序员&#xff0c;才敢说出来的大实话。今天的内容&#xff0c;写给想学计算机和计算机专业的朋友们&#xff1a; . &#x1f340;数学课要学好&#xff0c;否则搞算法、AI的时候弄不好得再学一遍 &#x1f340;计算机基础知识很重要&#xff0c;只…
阅读更多...
在无GPU的windows上运行ChatTTS

在无GPU的windows上运行ChatTTS

如果你在安装的过程中出现了下面的错误&#xff0c;不妨先看看这些安装步骤&#xff1a; cl: 命令行 error D8021 :无效的数值参数“/Wno-register” error: command C:\ windows ERROR: Failed building wheel for pynini 卷完了文本&#xff0c;卷图片&#xff0c;卷完了图…
阅读更多...
MySQL——覆盖索引

MySQL——覆盖索引

覆盖索引介绍 理解方式一&#xff1a;索引是高效找到行的一个方法&#xff0c;但是一般数据库也能使用索引找到一个列的数据&#xff0c;因此它不必读取整个行。毕竟索引叶子节点存储了它们索引的数据&#xff1b;当然通过读取索引就可以得到想要的数据&#xff0c;那就不需要…
阅读更多...
【python】成功解决“SyntaxError: can’t assign to function call”错误的全面指南

【python】成功解决“SyntaxError: can’t assign to function call”错误的全面指南

成功解决“SyntaxError: can’t assign to function call”错误的全面指南 在Python编程中&#xff0c;语法错误&#xff08;SyntaxError&#xff09;是初学者和经验丰富的开发者都可能遇到的问题。其中&#xff0c;“SyntaxError: can’t assign to function call”这个错误常…
阅读更多...
软件三班20240605

软件三班20240605

文章目录 1.创建工程和模块2.添加 web支持3.创建前端代码4.添加servlet 依赖5. 代码6.案例2 1.创建工程和模块 2.添加 web支持 方法1 方法2 3.创建前端代码 4.添加servlet 依赖 5. 代码 <!DOCTYPE html> <html lang"en"> <head><meta c…
阅读更多...
被斯坦福抄作业了？在线体验下：国产大模型确实越来越棒啦!

被斯坦福抄作业了？在线体验下：国产大模型确实越来越棒啦!

抄袭&#xff1f; 这里不做评价了&#xff1a; 官方仓库 地址&#xff1a;miniCPM-Llama3-V-2_5 免费在线体验地址 链接&#xff1a;Llama3-V-2_5 模型能力&#xff1a; 模型实际体验 问他什么模型&#xff1a;&#xff08;可能用了它的数据集吧&#xff09; 图片分析…
阅读更多...
星创编辑器在投放业务中的落地｜得物技术

星创编辑器在投放业务中的落地｜得物技术

搭建一个落地页需要涉及到多方合作&#xff0c;需要不断地进行沟通协调。繁杂的流程需要耗费很多的时间&#xff0c;因此我们推动产品重新搭建了一个专门服务于软广投放流程的编辑器——星创&#xff0c;完成广告搭建在投放业务各系统中的闭环。 一、落地页技术架构 名词解释…
阅读更多...
数据新生态：Web3如何重新定义个人数据权利

数据新生态：Web3如何重新定义个人数据权利

随着数字化时代的不断深入&#xff0c;个人数据已经成为了现代社会中最宝贵的资源之一。然而&#xff0c;传统互联网时代下&#xff0c;个人数据往往被大型科技公司垄断、滥用&#xff0c;个人数据权利常常受到侵犯。而随着Web3技术的崛起&#xff0c;人们开始期待一种全新的数…
阅读更多...
这几年一直有人在问:软件行业现在环境好不好?(俩张图告诉你答案)IT还有机会回暖吗?

这几年一直有人在问:软件行业现在环境好不好?(俩张图告诉你答案)IT还有机会回暖吗?

这几年一直有人在问:软件行业现在环境好不好?(俩张图告诉你答案)IT还有机会回暖吗? 近几年软件行业确实是不太景气,身边很多朋友都面临找工作难的景象.it培训行业也是对老师进行裁员,砍掉大部分学科, 大家可以在下方评论发表自己的看法,认为IT还有机会回暖吗?
阅读更多...
Vue进阶之Vue无代码可视化项目（四）

Vue进阶之Vue无代码可视化项目（四）

Vue无代码可视化项目 左侧栏第一步LeftPanel.vueLayoutView.vuebase.css第二步LayoutView.vueLeftPanel.vue编排引擎smooth-dnd安装创建文件SmoothDndContainer.tsutils.tsSmoothDndDraggable.tsLeftPanel.vue左侧栏 第一步 创建LeftPanel LeftPanel.vue <script setup…
阅读更多...
第15章 面向服务架构设计理论实践

第15章 面向服务架构设计理论实践

服务是一个由服务提供者提供的&#xff0c;用于满足使用者请求的业务单元。服务的提供者和使用者都是软件代理为了各自的利益而产生的角色。 在面向服务的体系结构(Service-Oriented Architecture,SOA)中&#xff0c;服务的概念有了延伸&#xff0c;泛指系统对外提供的功能集。…
阅读更多...
最新文章

Copyright @ 2022~2023