1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > Vue学习小札——2.6 组件参数校验与非props特性

Vue学习小札——2.6 组件参数校验与非props特性

时间:2022-03-14 00:29:11

相关推荐

Vue学习小札——2.6 组件参数校验与非props特性

<div id="app"><child content="{'a':1}"></child></div><script>ponent('child',{// props: ['content'],//组件参数校验props: {//content:String,// content: [String, Number],content: {type: String,required: true,default:'defaultValue',validator: function(value) {return (value.length > 5)}}},template: '<div>{{content}}</div>',})var vm = new Vue({el: "#app",});</script>复制代码

父组件通过属性content向子组件传递参数,子组件通过props接受,

props: ['content'],复制代码

子组件也可以对父组件传过来的参数进行校验,判断参数是否未String类型

props: {content:String}复制代码

判断参数是否为String或者Number类型

props: {content: [String, Number]}复制代码

type判断参数类型,requried是否为必传参数,default默认值 当父组件没有传参数给子组件时显示,validator函数自定义其他校验

props: {content: {type: String,required: true,default:'defaultValue',validator: function(value) {return (value.length > 5)//如果value.length > 5 ,则返回true}}复制代码

props特性 VS 非props特性

props特性:指的是当你的父组件使用子组件的时候,通过属性向子组件传值的时候,恰好子组件里声明了对父组件传递过来的属性的接受。(父组件调用子组件传递了content,子组件恰好再props里声明了content)。

1.可以在子组件使用父组件传过来的数据

2.不会把属性显示在dom之中

非props特性:指的是父组件向子组件传递一个属性,子组件并没有声明接受父组件传递过来的内容。

1.无法使用

2.属性会展示在子组件最外层的dom标签的html里。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。