32-vue的父传子props属性基本使用（对象形式）可类型限制，验证，默认值

最新推荐文章于 2024-07-01 00:00:00 发布
最新推荐文章于 2024-07-01 00:00:00 发布
阅读量2.6k 收藏
点赞数
分类专栏： 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43472934/article/details/112434720
版权

验证支持的类型
String
Number
Boolean
Array
Object
Date
Function
Symbol

1、类型限制（单值）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id ="app">
    <!-- 使用父组件的数据时，必须使用v-bind指令 -->
    <cpn :cmessage="message"></cpn>
  </div>

  <template id="cpn">
    <div>
      <h2>{{cmessage}}</h2>
    </div>
  </template>

  <script>

  // 父传子：props
  const cpn={
    template : '#cpn',
    props:{
      // 1，类型限制（ 'null'匹配任何类型）
      cmessage:String
    }
  }

   //创建Vue实例,得到 ViewModel
   var vm = new Vue({
    el: '#app',
    data:{
      message: '好冷啊',
      movides:['温暖的抱抱','拆弹专家','送你一朵红花']
    },
    components:{
      cpn
    }
   });
  </script>
</body>

</html>

2、类型限制（多个限制）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id ="app">
    <!-- 使用父组件的数据时，必须使用v-bind指令 -->
    <cpn :cmessage="message"></cpn>
  </div>

  <template id="cpn">
    <div>
      <h2>{{cmessage}}</h2>
    </div>
  </template>

  <script>

  // 父传子：props
  const cpn={
    template : '#cpn',
    props:{
      // 2，类型限制（ 'null'匹配任何类型）
      cmessage:[String,Number]
    }
  }

   //创建Vue实例,得到 ViewModel
   var vm = new Vue({
    el: '#app',
    data:{
      message: '好冷啊',
      movides:['温暖的抱抱','拆弹专家','送你一朵红花']
    },
    components:{
      cpn
    }
   });
  </script>
</body>

</html>

3、required

使用required必须使用v-bind绑定相应的值

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id ="app">
    <!-- 使用父组件的数据时，必须使用v-bind指令 -->
    <cpn></cpn>
  </div>

  <template id="cpn">
    <div>
      <h2>{{cmessage}}</h2>
      <h2>{{cmovides}}</h2>
    </div>
  </template>

  <script>

  // 父传子：props
  const cpn={
    template : '#cpn',
    props:{
      cmessage:{
        type: String,
        required: true
      },
      cmovides:{
      	type: Array
      }
    }
  }

   //创建Vue实例,得到 ViewModel
   var vm = new Vue({
    el: '#app',
    data:{
      message: '好冷啊',
      movides:['温暖的抱抱','拆弹专家','送你一朵红花']
    },
    components:{
      cpn
    }
   });
  </script>
</body>

</html>

在这里插入图片描述

4、带有默认值的字符串

使用默认值，则不需要使用v-bind绑定。如果使用了v-bind绑定，则默认值无效。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id ="app">
    <!-- 使用父组件的数据时，必须使用v-bind指令 -->
    <cpn></cpn>
  </div>

  <template id="cpn">
    <div>
      <h2>{{cmessage}}</h2>
    </div>
  </template>

  <script>

  // 父传子：props
  const cpn={
    template : '#cpn',
    props:{
      cmessage:{
        type: String,
        default : '踏山河'
      }
    }
  }

   //创建Vue实例,得到 ViewModel
   var vm = new Vue({
    el: '#app',
    data:{
      message: '好冷啊',
      movides:['温暖的抱抱','拆弹专家','送你一朵红花']
    },
    components:{
      cpn
    }
   });
  </script>
</body>

</html>

5、带有默认值的数组

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id ="app">
    <!-- 使用父组件的数据时，必须使用v-bind指令 -->
    <cpn></cpn>
  </div>

  <template id="cpn">
    <div>
      <h2>{{cmessage}}</h2>
    </div>
  </template>

  <script>

  // 父传子：props
  const cpn={
    template : '#cpn',
    props:{
      // 对象或数组默认值必须从一个工厂函数获取
      cmessage:{
        type: Array,
        default(){
          return ['真冷','生死无话']
        }
      }
    }
  }

   //创建Vue实例,得到 ViewModel
   var vm = new Vue({
    el: '#app',
    data:{
      message: '好冷啊',
      movides:['温暖的抱抱','拆弹专家','送你一朵红花']
    },
    components:{
      cpn
    }
   });
  </script>
</body>

</html>

6、使用validator

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>

<body>
  <div id ="app">
    <!-- 使用父组件的数据时，必须使用v-bind指令 -->
    <cpn :cmessage="message"></cpn>
  </div>

  <template id="cpn">
    <div>
      <h2>{{cmessage}}</h2>
    </div>
  </template>

  <script>

  // 父传子：props
  const cpn={
    template : '#cpn',
    props:{
      cmessage:{
        // cmessage值必须匹配下列字符串中的一个,否则会报错
        validator(value){
          return ['success','warn'].indexOf(value)!==-1;
        }
      }
    }
  }

   //创建Vue实例,得到 ViewModel
   var vm = new Vue({
    el: '#app',
    data:{
      message: 'warn',
      movides:['温暖的抱抱','拆弹专家','送你一朵红花']
    },
    components:{
      cpn
    }
   });
  </script>
</body>

</html>
搞钱自律
关注
专栏目录
props验证与默认值，Vue的双向数据绑定，Vue组件父传子，子传父，兄弟通信
L990614的博客
01-22 455
1. props验证与默认值 父props与子props是单向下行绑定：父级的props的值更新会流动到子组件中，但反过来却不行。 避免子组件意外改变父级组件的状态，导致数据流混乱。 每次父级组件发生更新时，子组件中所有的props都将会刷新为最新的值。 不能在子组件内部改变props，否则会导致浏览器控制台发出警告 子组件要修改时，用$emit调用自定义事件，父组件接到后由父组件修改 改变props的常用例子： 这个用来传递一个初始值；这个组件接下来希望将其作为一个本地的数据来使用，要定义一个本地属
前端进阶Vue框架-----父传子（组件验证，默认属性）
m0_61656944的博客
02-18 189
<title>Document</title> <script src="/lib/vue.js"></script> </head> <body> <div id="box"> <!-- 1.想要定义在内容里显示什么内容，先定义一个数据，然后传到props中接收，再用{{传下来的值}}显示 2.想要让右边的按钮隐藏，可以先动态绑定一个布尔值数据...
31-vue的父传子props属性基本使用（数组形式）
weixin_43472934的博客
01-10 358
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document&lt
vue2 props的类型如果为对象或者数组，为什么默认值一定得是个函数
最新发布
BradenHan的专栏
07-01 1641
TOC/TOC。
vue2中props属性设置一个对象或数组的默认值
weixin_46504400的博客
04-15 923
在Vue.js中，如果您想要为一个props属性设置一个对象或数组的默认值，您应该使用一个函数来返回这个默认值。这是因为对象和数组是引用类型，直接将它们作为默认值可能会导致预设的默认值被所有实例共享，这不是我们想要的结果。在这个示例中，我们定义了一个名为myObjectProp的props属性，其类型为Object。然后，我们提供了一个默认值函数，它返回一个新的对象。这样，每个实例都会有自己的默认值对象，而不是共享同一个对象。
vue中props设置默认值
热门推荐
cecoal的博客
07-28 1万+
但是，如果初始化的时候就使用里面的值，可能会出现没有该值的情况，此时就会报错。应该使用以下有默认值的写法。
Vue中props的默认值用法
m0_65315526的博客
12-23 1088
Vue中props的默认值用法
vue父组件向子组件(props)传递数据的方法
11-29
- Vue提供了`props`的验证机制，可以限制`props`的类型、默认值等，以确保数据传递的正确性。 4. **其他组件通信方式**： - **自定义事件**：子组件可以通过触发自定义事件来通知父组件某些操作已完成或需要父...
vue的props实现子组件随父组件一起变化
09-01
为了使子组件能够监听到父组件`props`的变化，Vue提供了`props`选项来声明子组件期望接收的属性。在上面的例子中，子组件内部有： ```javascript props: ['myMessage'], ``` 这样，Vue知道`myMessage`是一个需要从...
vue中的props(父传子)——定义要接收的组件属性列表
沧海一粟
03-24 573
vue2的组件传参方式
weixin_46846007的博客
06-05 906
vue2的组件传参方式
vue组件传值prop类型
你如今的气质里，藏着你走过的路，经历过的事，读过的书，和爱过的人。
05-05 6036
Prop 验证 我们可以为组件的 prop 指定验证要求，例如你知道的这些类型。如果有一个需求没有被满足，则 Vue 会在浏览器控制台中警告你。这在开发一个会被别人用到的组件时尤其有帮助。 为了定制 prop 的验证方式，你可以为props中的值提供一个带有验证需求的对象，而不是一个字符串数组。例如： Vue.component('my-component', { props: {...
vue学习之组件中的props类型及其默认值
King的博客
12-08 3778
在日常开发过程中，遇到的props类型大概有6种：字符串、数字、布尔值、数组、对象、函数。 props: { demoString: { type: String, default: '' }, demoNumber: { type: Number, default: 0 }, demoBoolean: { type: Boolean, default: true }, dem
Vue2.0学习-2-深入了解组件--2--Prop
Small_sesame的博客
07-20 513
（day9-2） Prop的大小写、Prop类型、传递一个静态或动态Prop 单向数据流、Prop验证、非Prop的Attribute 一、Prop的大小写、Prop类型、传递一个静态或动态Prop 1、Prop的大小写（camelCase vs kebab-case） camelCase（驼峰命名法）、kebab-case（短横线分隔命名） 在JavaScript中是驼峰命名，在HTML中将会是kebab-case。（因为浏览器会把所有的大写字符解释为小写字符） 2、Prop类型 # 通.
（十二）vue.js组件——进阶篇之使用props传递数据（2）
默守的博客
11-12 4578
(1)为什么使用props 前面我们实现了通过组件把模板内容进行复用，这是不错的事情，但是我们却不希望在任何地方任何时候组件都是都是那样的一层不变。 我们更希望在不同的情况下，组件有不同的展现，这样它才是有趣的，更让我们喜欢的。 而要实现这个需要，就需要使用props了，他能让组件如同我们所知的js函数一样，在被使用时能够接收参数，并根据参数有不同的展现。 (2)使用props流程【数组形式】 要...
props的对象配置
GZZ__z的博客
10-28 1471
如果将props定义为数组，有如下几个缺点： 1.无法进行数据类型的限制 2.无法对数据进行自定义的校验 解决：将props定义为对象 对象类型：通过对象的方式定义props成员，可以为每个prop成员制定规则(类型，校验...),常用的如下 ： 一，单一类型限制： 通过type属性限制类型 类型要指定为构造函数类型，不要加引号，常见类型有： String | Number | Boolean | Array | Object | Function props: { id:.
Vue中的props配置
qq_54954970的博客
11-22 1094
配置项props： 功能：让组件接收外部传过来的数据。 (1).传递数据： <Demo name='xxx' age='xxx'/> 例如： (2).接收数据（一共有三种方式）： 第一种方式： props:['name','age'] 该方式最为简便，但是不能限制传入的参数类型和指定默认值。 如图所示： 运行结果如下： 2.第二种方式： props：{ name：String, age:Number } 该方式可以
Vue｜props配置
商务合作 / 项目定制 / 学习交流。个人vx：lovely_wml
11-16 1万+
props是Vue中用于传递数据的属性。通过在子组件的选项中定义props属性，可以指定子组件可以接收的数据以及其他配置选项。父组件可以通过在子组件上使用特定的属性来传递数据。
Vue组件开发：props验证及其重要性
Vue组件定义时，可以在`props`对象中声明预期的属性及其约束条件，例如类型、默认值等。例如： ```javascript props: { fooMessage: { type: String, // 声明为字符串类型 required: true, // 非空验证 default...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值