DDR爱好者之家

VueJS组件之间通过props交互及验证的方式
站长资源 2024/11/27 佚名
2 1538
DDR爱好者之家 Design By 杰米

props 是父组件用来传递数据的一个自定义属性。父组件的数据需要通过 props 把数据传给子组件，子组件需要显式地用 props 选项声明 "prop"。

父组件通过props将数据传递给子组件

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="/UploadFiles/2021-04-02/vue.min.js">


效果如图：


VueJS组件之间通过props交互及验证的方式


动态 props组建数据传递


类似于用 v-bind 绑定 HTML 特性到一个表达式，也可以用 v-bind 动态绑定 props 的值到父组件的数据中。每当父组件的数据变化时，该变化也会传导给子组件：


HTML





<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="/UploadFiles/2021-04-02/vue.min.js">


效果如图：


VueJS组件之间通过props交互及验证的方式


 v-bind 指令将 todo 传到每一个重复的组件中


HTML





<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="/UploadFiles/2021-04-02/vue.min.js">


效果如下：


VueJS组件之间通过props交互及验证的方式


注意: props 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。 


组件为 props 指定验证要求


props 是一个对象而不是字符串数组时，它包含验证要求：


JS





Vue.component('example', {
 props: {
  // 基础类型检测 （`null` 意思是任何类型都可以）
  propA: Number,
  // 多种类型
  propB: [String, Number],
  // 必传且是字符串
  propC: {
   type: String,
   required: true
  },
  // 数字，有默认值
  propD: {
   type: Number,
   default: 100
  },
  // 数组／对象的默认值应当由一个工厂函数返回
  propE: {
   type: Object,
   default: function () {
    return { message: 'hello' }
   }
  },
  // 自定义验证函数
  propF: {
   validator: function (value) {
    return value > 10
   }
  }
 }
})







type 可以是下面原生构造器：


    
  
  • String
    • 
  
  • Number
    • 
  
  • Boolean
    • 
  
  • Function
    • 
  
  • Object
    • 
  
  • Array
    • 



type 也可以是一个自定义构造器，使用 instanceof 检测。


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。


                                

                                

                                     

                                
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米