vue prop传值类型检验方式

2024-08-09 13:45:47

prop 传值检验规则

如果是 prop 是静态传值，则必须是 String 类型

如果是 prop 是动态传值，则可以验证任意类型

示例，如果必须要传一个Number，就必须使用 bind

//声明
Vue.component("blog-post", {
 props: {
  postTitle: {
   type: Number,
   default: 10000
  }
 },
 template: "<h3>{{ postTitle }}</h3>"
});
//在template中调用，静态传值，值必定是 String
<blog-post postTitle="54"></blog-post>
//在template中调用，动态传值，值可以是 String、Number、Boolen。。。
<blog-post :postTitle="54"></blog-post>

类型检查的 type 值，可以是下列原生构造函数中的一个：

String

Number

Boolean

Array

Object

Date

Function

Symbol

type 还可以是一个自定义的构造函数，并且通过 instanceof 来进行检查确认。

示例：

//例如，给定下列现成的构造函数：
function Person (firstName, lastName) {
 this.firstName = firstName
 this.lastName = lastName
}
//可以使用,检验是否为 Person 的实例
Vue.component('blog-post', {
 props: {
  author: Person
 }
})

补充知识：vue中prop验证、类型检查及注意事项

1、注意：null和undefined会通过任何类型检测

2、数组或对象类型需要提供默认值的话需要通过函数返回。详情看这里

 props:{// 数组或对象的默认值需要通过函数返回
  authInfo:{
  type:Object,
        default(){
   return{
   name:'张三',
            sex:0
          }
        }
      },
      list:{
  type:Array,
        default(){
   return[
   1,2,3
          ]
        }
      }
    }

3、使用自定义函数验证

    props:{
  address:{
  validator(value){
          return ['黑龙江','吉林','辽宁'].indexOf(value) !== -1
        }
      }
    }

4、非prop的特性：若一个属性传向一个组件，但是该组件并没有定义相应 prop。则该属性称为非prop特性。非prop特性会作用到组件的根元素上。

若非prop中含有组件跟元素定义的属性。则非prop中的值会覆盖组件定义的值（这种情况称作非prop继承）。style和class例外，它们会发生合并。

详情看这里

不希望非prop继承该怎么办？

如果不希望非prop自动作用到组件的根元素上可以在vue的组件选项里添加 inheritAttrs选项（此选项无法影响class和style的绑定）。

inheritAttrs:false

inheritAttrs属性可以和$attrs配合可以是非prop作用到开发者想作用到的元素上。而不作用的根元素上。例：

<template>
  <div>
    <input type="text" v-bind="$attrs">  <!--将非prop绑定到此元素-->
  </div>
</template>
<script>
 export default {
 name: "sg-test",
    inheritAttrs:false,//禁止 非prop继承
 }
</script>

以上这篇vue prop传值类型检验方式就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

vue 中几种传值方法(3种)

前言 vue项目中,组件跟组件之间数据的传递是很普遍的行为,在这里总结几种常见的vue组件跟组件之间传值方式,其中,主要有父子组件,非父子组件传值. 父组件向子组件传值方法:父组件内设置要传的数据,在父组件中引用的子组件上绑定一个自定义属性并把数据绑定在自定义属性上,在子组件添加参数props接收即可.具体可参考官方文档. 父组件传递参数代码如下: <template> <center-template :form='userinfo'></center-template&
Vue组件中prop属性使用说明实例代码详解

Prop 的大小写 (camelCase vs kebab-case) HTML 中的特性名是大小写不敏感的,所以浏览器会把所有大写字符解释为小写字符.这意味着当你使用 DOM 中的模板时,camelCase (驼峰命名法) 的 prop 名需要使用其等价的 kebab-case (短横线分隔命名) 命名: Vue.component('blog-post', { // 在 JavaScript 中是 camelCase 的 props: ['postTitle'], template: '<h
Vue props用法详解(小结)

Vue props用法详解组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数据给子组件:子组件通过 events 给父组件发送消息. 父子级组件比如我们需要创建两个组件 parent 和 child.需要保证每个组件可以在相对隔离的环境中书写,这样也能提高组件的可维护性. 这里我们先定义父子两个组件和一个 Vue 对象: var childNode = { templat
vue中使用props传值的方法

1.静态传值(在父组件中赋值好props中属性的值传递给子组件) 父组件 <template> <div> <input v-model="message"> <child message="hello"></child> </div> </template> <script> import child from './components/child.vue' expo
vue prop传值类型检验方式

prop 传值检验规则如果是 prop 是静态传值,则必须是 String 类型如果是 prop 是动态传值,则可以验证任意类型示例,如果必须要传一个Number,就必须使用 bind //声明 Vue.component("blog-post", { props: { postTitle: { type: Number, default: 10000 } }, template: "<h3>{{ postTitle }}</h3>"
vue组件传值的实现方式小结【三种方式】

本文实例讲述了vue组件传值的实现方式.分享给大家供大家参考,具体如下: 前言 vue的组件传值分为三种方式:父传子.子传父.非父子组件传值引用官网的一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消息,如下图所示: 下面我们就开始用代码(一言不合就上代码)详细的介绍vue组件传值的三种方式 1.父传子子组件的代码: <template> <div id="container"&
解决vue prop传值default属性如何使用,为何不生效的问题

如果在template中,显示的调用了 prop 属性,那么 default 属性就不会生效如果在template中,不调用 prop 属性,default 就会生效 default 值有效与否,和 prop 的验证通不通过,没有关系 //声明 Vue.component("blog-post", { props: { postTitle: { type: Number, default: 10000 } }, template: "<h3>{{ postTit
vue prop属性传值与传引用示例

vue组件在prop里根据type决定传值还是传引用. 简要如下: 传值:String.Number.Boolean 传引用:Array.Object 若想将数组或对象类型也以值形式传递怎么办呢?如下方式可以实现: // component-A 引用component-B组件 <component-B :person="personList" :personBak="person_Bak"> </component-B> // compone
分享Vue组件传值的几种常用方式(一)

目录前言第一种:父向子传值新建文件导入结构引入注册使用子组件子组件内部代码完善父组件内部代码完善操作main.js文件思路总结前言大家好,这个系列我们来讲解一下vue组件传值的几种常见方法和逻辑链路.最常见的vue组件传值分为三种,第一种是父向子传值,第二种是子向父传值,第三种是兄弟组件之间的传值,下面我们先就第一种情况来进行分析和编写. 第一种:父向子传值父向子传值意思就是要把父组件里的值传递给子组件,方法是在子组件内部自定义一个props属性,通过props属性来完
vue组件传值的11种方式总结

目录 1.父组件传给子组件 2.子组件传给父组件 3.兄弟组件间传值 4.路由间传值 i.使用问号传值 5.使用$ref传值 6.使用依赖注入传给后代子孙曾孙 7.祖传孙 $attrs 8.孙传祖 9.$parent 10.sessionStorage传值 11.vuex 总结不写这篇文章,我自己都不知道我知道的vue组件传值的方式竟然有11种之多,其实静下来想想,常用的也有五六种,先上一张总结图: 1.父组件传给子组件在子组件里定义一个props,即props:[‘msg’],msg可以是
Vue常用传值方式、父传子、子传父及非父子实例分析

本文实例讲述了Vue常用传值方式.父传子.子传父及非父子.分享给大家供大家参考,具体如下: 父组件向子组件传值是利用props 子组件中的注意事项:props:['greetMsg'],注意props后面是[]数组可以接收多个值,不是{}. 且此处的greetMsg用greet-msg会报错,记住需用驼峰法命名非父子组件进行传值非父子组件之间传值,需要定义个公共的公共实例文件bus.js,作为中间仓库来传值,不然路由组件之间达不到传值的效果. import Vue from 'vue' e
八种vue实现组建通信的方式

目录一.组件通信 1.props 父组件--->子组件通信 2.$emit 子组件--->父组件传递 3.bus(事件总线) 兄弟组件通信 4.$parent.$children 直接访问组件实例 5.$refs 6.provide/inject(提供/注入) 多组件或深层次组件通信 7.slot(slot-scope作用域插槽) 子元素-->父元素(类似于通信) 8.vuex状态管理一.组件通信 1.props 父组件--->子组件通信父组件---属性的方式传值给子组件子
vue组件间通信六种方式（总结篇）

前言组件是 vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.一般来说,组件可以有以下几种关系: 如上图所示,A 和 B.B 和 C.B 和 D 都是父子关系,C 和 D 是兄弟关系,A 和 C 是隔代关系(可能隔多代). 针对不同的使用场景,如何选择行之有效的通信方式?这是我们所要探讨的主题.本文总结了vue组件间通信的几种方式,如props. $emit / $on .vuex. $parent / $children . $attrs
vue props传值失败输出undefined的解决方法

如果在prop中传的值为一个没有使用特殊命名规则的变量如:(type),可以顺利传值: <code class="language-html"><div id="app"> <test :type="type"></test> </div> Vue.component("test", { props: ['type'], template: '<div @cli

vue prop传值类型检验方式

相关推荐

随机推荐