Let’s talk about component parameters in vue.
Medium component parameters
We can specify verification requirements for the component's prop, such as the types you know. If there is a requirement that is not met, Vue will warn you in the browser console. This is especially helpful when developing a component that will be used by others.
Let's take a look at the simplest and most common vue code
<div >
<item content="hello"></item>
</div>
<script>
("item",{
props:["content"],
template:"<div>{{content}}</div>"
})
new Vue({
el:"#root"
})
</script>
This is the easiest example of creating components and parent components to children, but can we consider it if I want the parent component to pass parameters to children to be a numeric type? Or is it a boolean type? So here we must check the parameters passed by the parent component.
<div >
<item content="hello"></item>
</div>
<script>
("item",{
props:{
content:String
},
template:"<div>{{content}}</div>"
})
new Vue({
el:"#root"
})
</script>
We modified the code of the first example. We changed the props attribute in the child component to an object form, and we also restricted the content passed by the parent component to String type, but this situation will still occur. Please see the following code:
<div >
<item content="1"></item>
</div>
<script>
("item",{
props:{
content:String
},
template:"<div>{{content}}</div>"
})
new Vue({
el:"#root"
})
</script>
If we change the value of the content in the parent component is equal to 1, then we naturally understand the content as a numeric type, and the page will have an error message. However, after we open the page, no browser error was reported. Why is this?
In vue, the values passed by default are strings. If you want to pass a number, you must add one in front of the content:
We hope it will report an error, so we should modify the above code in this way.
<div >
<item :content="1"></item>
</div>
<script>
("item",{
props:{
content:String
},
template:"<div>{{content}}</div>"
})
new Vue({
el:"#root"
})
</script>
Then at this time, VUE will give us a code error message. If we hope it does not report an error, then we modify the type in the content
<div >
<item :content="1"></item>
</div>
<script>
("item",{
props:{
content:Number
},
template:"<div>{{content}}</div>"
})
new Vue({
el:"#root"
})
</script>
Of course, content can also accept an array to determine the multiple parameters passed by its parent component as a child component.
<div >
<item :content="1"></item>
</div>
<script>
("item",{
props:{
content:[String,Number]
},
template:"<div>{{content}}</div>"
})
new Vue({
el:"#root"
})
</script>
In addition to array form, we can also write it as object form. Then in the form of the object, vue provides us with various optional parameters.
<div >
<item content="hello world"></item>
</div>
<script>
("item",{
props:{
content:{
type:String,
required:true,
default:"asd",
validator:function(value){
return (>5)
}
}
},
template:"<div>{{content}}</div>"
})
new Vue({
el:"#root"
})
</script>
Summarize
The above is the component parameters in vue introduced to you by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message.
The editor will reply to everyone in time. Thank you very much for your support for my website!