Not much nonsense, father passes on to son to make a metaphor
I want to add an image on the home page, but I don’t want to use img every time and let img do css and animation events. At this time, the easiest way to encapsulate a page, then give a name to let the homepage get it by yourself, and just put an address! Nothing else is needed.
The steps are as follows:
Step 1: Create a component, which is equivalent to a creative folder, and is used frequently after storing small things.
<template>
<div>
<img src="./" alt="">
</div>
</template>
<script>
export default{
data(){
return{}
}
}
</script>
Step 2: Introduce this page on the home page
<script>
import Images from "../../../components/"
export default{
data(){
return{}
},
components:{
"xImage":Images
}
}
</script>
Step 3: Put xImage in HTML
<template>
<xImage :xxoo="imgs1"></xImage>
</template>
Step 4: Start by passing on the father to the son, and some people don’t know who is the father and who is the son. The one who can name a blind name in HTML is the father, and the one who imports must be the son.
:xxoo: A blindly named signal light, used to tell the sub-page, potatoes, I am sweet potatoes
imgs1: This is what the signal light is about to be launched
<template>
<xImage :xxoo="imgs1"></xImage>
</template>
export default{
data(){
return{
imgs1:"/timg?image&quality=80&size=b9999_10000&sec=1589655320760&di=6b907426d0fdb6b3d8b30ae5dd3761be&imgtype=0&src=http%3A%2F%%2Fzhidao%2Fpic%2Fitem%"
}
},
components:{
"xImage":Images
}
}
Step 5:
On the subpage, you can receive the things sent by the signal light just now. Some people think it's enough to just put imgs1 in, which is a big mistake! ! ! !
What he accepted was not the data, but the signal light I mentioned
So use props to receive this signal light and then make a request for the signal light. I only have potatoes of this quality! I don't want anything else
<template>
<img :src="xxoo" alt="">
</template>
<script>
export default{
data(){ ... },
props:{
xxoo:String
}
}
</script>
Here are some types of potatoes
- String : Normal 'xxxxx'
- Number: Just 123456789
- Boolean: Just true or false
- Array: Single variable stores multiple values [1,2,3]
- Object:Object {a:1,b:2}
This is the article about Vue's props father-to-son sample code. For more related content about Vue props father-to-son, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!