這篇文章主要講解了如何實現Vue的props父傳子，內容清晰明了，對此有興趣的小伙伴可以學習一下，相信大家閱讀完之后會有幫助。
廢話不多少，父傳子做一個比喻
首頁想加一個圖片，但又不想每次都用img而且又讓img做css和動畫事件。此時最簡單的方法做一個頁面封裝，然后起一個名字讓首頁自己獲取，放一個地址就行！其他什么都不用管。
步驟如下:
第一步:創建一個組件，相當于創意文件夾，專門存小東西以后經常用
<template>
<div>
<img src="./xxx.xx" alt="">
</div>
</template>
<script>
export default{
data(){
return{}
}
}
</script>第二步:在首頁這邊引入該頁面
<script>
import Images from "../../../components/imgs.vue"
export default{
data(){
return{}
},
components:{
"xImage":Images
}
}
</script>第三步:把xImage放在HTML里
<template>
<xImage :xxoo="imgs1"></xImage>
</template>第四步:開始父傳子，有人不知道誰是父誰是子。能在HTML瞎起名的就是父，import入進來的肯定就是子了
:xxoo : 瞎起名的信號燈，用來告訴子頁面，土豆土豆我是地瓜
imgs1 : 這就是信號燈準備發射出去的東西
<template>
<xImage :xxoo="imgs1"></xImage>
</template>
export default{
data(){
return{
imgs1:"https://cache.yisu.com/upload/information/20200622/114/2196.html"
}
},
components:{
"xImage":Images
}
}第五步:
在子頁面接收剛才信號燈發過來的東西，有人以為直接把imgs1放進去就行了，大錯特錯哦?。。?！
他接受的不是數據，而是我說的信號燈
所以用props接收這個信號燈，然后把信號燈做一個要求，我只要這樣品質的土豆！其他的我不要
<template>
<img :src="xxoo" alt="">
</template>
<script>
export default{
data(){ ... },
props:{
xxoo:String
}
}
</script>以下就是土豆有幾種類型
看完上述內容，是不是對如何實現Vue的props父傳子有進一步的了解，如果還想學習更多內容，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
