本篇讲基于对页面组件化拆分后, 组件之间如何进行数据传递, 通常是父组件如何给子组件进行传值, 子组件接收并进行数据校验后再使用.

父子组件传值

<!DOCTYPE html>

<html lang="en">

<head>

  <title>组件间传值</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      // 1. 父组件可通过 自定义属性 的方式给 子组件传递数据

      template: `

      <div>

        <Son content="father love you forever!" />

      </div>

      `

    })

    // 2. 子组件通过 props 属性进行接收值

    app.component('Son', {

      props: ['content'],

    // 3. 子组件成功取到父组件传过来的数据后, 即可在模板使用了

      template: `<div>{{content}}</div>`

    })

    const vm = app.mount('#root')

  </script>

</body>

</html>

就两个关键步骤:

  • 父组件可通过 自定义属性 的方式给 子组件传递数据
  • 子组件通过 props 属性接收数据

动态属性传值

即根据后端数据去让父组件的属性值能动态变化地将其传递给子组件 (v-bind).

<!DOCTYPE html>

<html lang="en">

<head>

  <title>动态属性传值 v-bind</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      // 通过数据去动态传值 v-bind

      data () {

        return { num: 666 }

      },

      template: `

      <div>

        <Son :content="num" />

      </div>

      `

    })

    // 2. 子组件通过 props 属性进行接收值

    app.component('Son', {

      props: ['content'],

    // 3. 子组件成功取到父组件传过来的数据后, 即可在模板使用了

      template: `<div>{{content}}--{{typeof content}}</div>`

    })

    const vm = app.mount('#root')

  </script>

</body>

</html>

注意这里的 content 属性要通过 v-bind:content="num", 简写为 :content:"num". 此时页面显示:

666--number

然而如果通过 content:"666" 的方式传递, 则页面会显示:

666--string

说明由 data ( ) 经过 v-bind 这样动态传值子组件能识别数据类型的. 而 直接写死传则是静态的字符 string 类型.

子组件数据校验

父子组件间能动态属性传值, 则相应地子组件能对传过来的数据做一个校验, 如果有问题就警告这样的.

<!DOCTYPE html>

<html lang="en">

<head>

  <title>子组件校验数据</title>

  <script src="https://unpkg.com/vue@3"></script>

</head>

<body>

  <div id="root"></div>

  <script>

    const app = Vue.createApp({

      data () {

        return { num: null }

      },

      template: `

      <div>

        <Son :content="num" />

      </div>

      `

    })

    // 子组件通过 props 属性进行接收值

    // 1. 类型校验: String, Number, Boolean, Array, Object, Function

    // 2. 必填校验: required: true

    // 3. 默认属性: default: functioin () { reutn 666 }

    // 4. 复杂校验: validator: function (value) { return value > 10 }

    app.component('Son', {

      props: {

        content: {

          type: Number,

          required: true,

          // 默认可以是一个值, 函数啥的都行

          default: function () { return 666 },

          //

        }

      },

    // 3. 子组件成功取到父组件传过来的数据后, 即可在模板使用了

      template: `<div>{{content}}--{{typeof content}}</div>`

    })

    const vm = app.mount('#root')

  </script>

</body>

</html>

小结

  • 父组件可通过 自定义属性 v-bind 的方式给 子组件传递数据
  • 子组件通过 props 属性接收数据, 并能进行各种校验
  • 类型校验: String, Number, Boolean, Array, Object, Function
  • 必填校验: required: true
  • 默认属性: default: functioin ( )
  • 复杂校验: validator: function (value)

vue3 基础-组件间传值及校验的更多相关文章

  1. Vue 组件间传值

    前言 Vue 作为现在比较火的框架之一,相信您在使用的过程中,也会遇到组件间传值的情况,本文将讲解几种 Vue 组件间传值的几种方法,跟着小编一起来学习一下吧! 实现 注意: 学习本文,需要您对 Vu ...

  2. react组件间传值详解

    一.父子组件间传值     <1>父传子         父组件:

  3. Vue中组件间传值常用的几种方式

    版本说明: vue-cli:3.0 一.父子组件间传值 1.props/$emit -父组件==>>子组件: 子组件中通过定义props接收父组件中通过v-bind绑定的数据 父组件代码 ...

  4. Vue学习(二)-Vue中组件间传值常用的几种方式

    版本说明:vue-cli:3.0 主要分为两类: 1.父子组件间的传值 2.非父子组件间的传值 1.父子组件间传值 父组件向子组件传值 第一种方式: props 父组件嵌套的子组件中,使用v-bind ...

  5. React Native 系列(五) -- 组件间传值

    前言 本系列是基于React Native版本号0.44.3写的.任何一款 App 都有界面之间数据传递的这个步骤的,那么在RN中,组件间是怎么传值的呢?这篇文章将介绍到顺传.逆传已经通过通知传值. ...

  6. Vue组件间传值 v-model

    使用过Vue的同学应该都了解组件之间传值 父组件 --> 子组件 : props 子组件 --> 父组件 : 事件 其实有一种更为简单的方法,是基于上述两种方法,那就是 v-model 我 ...

  7. Angular中不同的组件间传值与通信的方法

    主要分为父子组件和非父子组件部分. 父子组件间参数与通讯方法 使用事件通信(EventEmitter,@Output): 场景:可以在父子组件之间进行通信,一般使用在子组件传递消息给父组件: 步骤: ...

  8. vue——父子组件间传值

    (1)父组件给子组件传值(商品详情页): 根据订单类型,判断显示立即购买/立即拼单: 通过props来传递参数 父组件(商品详情页) 父组件调用子组件,在子组件的标签中,通过:数据名称=”数据”的形式 ...

  9. Vue3组件间传值

    12种方式 1. 父组件 ./father.vue 点击查看代码 <template> <h1>father:</h1> <h3>子组件传过来的:{{ ...

  10. vue3.x组件间通信，实用小技巧都在这里

    本想简单写写,没想到说清楚已经变成了一篇很长的帖子,欢迎当笔记搜藏起来. props / emits 父子组件通信 props一般负责向子组件传递数据 下面是一个简单的例子,父组件向子组件传递了一个t ...

随机推荐

  1. 网口CE超标了~

    前不久遇到一个网口传导测试超标的问题,今天在此分享下,希望各位能有所收获~ 背景 在对量产产品EMC抽检时,发现网口CE测试在537KHz处超标2.84dB 因为是网口传导测试,所以首先检查与网口相关 ...

  2. ABB机械手维修37001电机开启接触器错误

    当ABB机器人报告37001电机开启接触器错误时,这往往意味着电机上电的接触器在执行动作时遇到了障碍.具体而言,该错误通常与位于控制柜内左下角的接触器相关,其中K42和K43负责控制电机的开启操作.深 ...

  3. 微信扫码登录授权过程中state字段的用法

    问题描述 最近在实现微信扫码登录这一块,然后看到state字段上面说是可以防csrf攻击 那么现在假设一个用户扫完码后由于某些原因扫码后的响应还没到,但是该平台的回调url已被窃取,然后被人设置到某个 ...

  4. autMan奥特曼机器人-对接deepseek教程

    一.安装插件ChatGPT 符合openai api协议的大模型均可使用此插件,包括chatgpt-4/chatgpt-3.5-turbo,可自定义服务地址和模型,指令:gpt,要求Python3.7 ...

  5. Flink - [06] 状态管理

    题记部分 一.Flink中的状态 由一个任务维护,并且用来计算某个结果的所有数据,都属于这个任务的状态. 可以认为状态就是一个本地变量,可以被任务的业务逻辑访问. Flink会进行状态管理,包括状态一 ...

  6. hbase - [06] rowkey的设计

    HBase是三维有序存储的,通过rowkey(行键),column key(column family和qualifier)和TimeStamp(时间戳)这三个维度可以对HBase中的数据进行快速定位 ...

  7. 借用【.bat 批处理】实现同时播放多个视频 · 以PotPlayer播放器为例

    突然有这样的需求:同时打开一个文件夹下的多个视频播放任务.如何来实现呢? 理所当然的是想到Potplayer本身可以开多个进程,也就是多开窗口播放,但是经过实验,发现在资源管理器中选取多个视频源并不能 ...

  8. Markdown 编写技巧汇总（二）

    继续上篇汇总 附-上篇汇总,接着做更加高级一点的应用技巧. [1]列表与引言嵌套 两者嵌套,如: > 我是一行文本 > 1. 文本1 > 2. 文本2 > 1. 文本 > ...

  9. 【目标检测】二、Fast R-CNN与SVD

    1.流程 (1) 空间金字塔池化(spatial pyramid pooling,SPP) 原理: (2)Fast-RCNN 2.数学概念 这么多个全连接层,必然存在计算的性能问题,让数学家们蠢蠢欲动 ...

  10. ssh WARNING: UNPROTECTED PRIVATE KEY FILE!

    前言 在 ssh -i 指定密钥文件 登录时,出现以下报错: Permissions 0644 for 'xxxx' are too open. It is required that your pr ...