脚本宝典收集整理的这篇文章主要介绍了

Vue 组件参数校验与非props特性

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

组件的参数校验

组件的参数校验指的是什么呢?你父组件向子组件传递的内容,子组件有权对这个内容进行一些约束,这个约束我们可以把它叫做参数的校验。

<div id="root">
    <child content="hello world"></child>
</div>
Vue.component('child',{
    props: ['content'],
    template: '<div>{{content}}</div>'
})
let vm = new Vue({
    el: '#root',
})

现在有这样一个需求,父组件调用子组件的时候,传递的这个content,我要做一些约束,要求它我传递过来的content必须是一个字符串,我们该怎么实现呢?

<div id="root">
    <child content="hello world"></child>
</div>
Vue.component('child',{
    props: {
        content: String         //子组件接收到的 content 这个属性,必须是一个字符串类型的
    },
    template: '<div>{{content}}</div>'
})
let vm = new Vue({
    el: '#root',
})

组件接收到的content这个属性,必须是一个字符串类型的,如果我需要的参数类型是字符串或者数组,又该怎么写呢?

props: {
    content: [ String, Number ]
},

content的类型,可以用数组来表示。

content其实还有更复杂的用法:

props: {
    content: {
        type: Sring,
        required: true,                 //必传
        default: 'default value',       //默认显示,非必传会显示
        validator(value){              //检测 content 的长度,如果长度大于 5,正常显示,如果长度小于 5 则报错 
            return (value.length > 5)
        }
    }
}

props特性

说到非props特性,它一定和props特性相对应。

props特性:当你的父组件使用子组件的时候,通过属性向子组件传值的时候,恰好子组件里面声明了对父组件传递过来的属性的一个接收,也就是说父子组件有个对应关系,如果你这么写我们就把叫做props特性

props特性的特点是,如下图:

  1. 我们在子组件里有一个content的内容传递,这个属性的内容传递是不会在dom标签上进行显示的。
  2. 当你父组件传递了content,你子组件接收了这个content,你在模版里就可以直接通过插值表达式或者通过this.content,去取得content里面的内容了。

props特性:父组件向子组件传递了一个属性,但是子组件并没有props这块的内容,也就是说子组件并没有声明我要接收父组件的传递过来的内容

props特点:

  1. props特性在子组件里面,没办法获取到你父组件传递的内容,因为你压根没声明你要获取的内容,也就没法用。
  2. 如果我们用的是非props特性,那么这个特性是会显示在dom标签上的

总结

以上是脚本宝典为你收集整理的

Vue 组件参数校验与非props特性

全部内容,希望文章能够帮你解决

Vue 组件参数校验与非props特性

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过