Vue的props父傳子的示例代碼
廢話不多少，父傳子做一個比喻
首頁想加一個圖片，但又不想每次都用img而且又讓img做css和動畫事件。此時最簡單的方法做一個頁面封裝，然后起一個名字讓首頁自己獲取，放一個地址就行！其他什么都不用管。
步驟如下:
第一步:創(chuàng)建一個組件，相當(dāng)于創(chuàng)意文件夾，專門存小東西以后經(jīng)常用
<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入進(jìn)來的肯定就是子了
:xxoo : 瞎起名的信號燈，用來告訴子頁面，土豆土豆我是地瓜
imgs1 : 這就是信號燈準(zhǔn)備發(fā)射出去的東西
<template>
<xImage :xxoo="imgs1"></xImage>
</template>
export default{
data(){
return{
imgs1:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1589655320760&di=6b907426d0fdb6b3d8b30ae5dd3761be&imgtype=0&src=http%3A%2F%2Fb.hiphotos.baidu.com%2Fzhidao%2Fpic%2Fitem%2F94cad1c8a786c91706be5bdccf3d70cf3ac75791.jpg"
}
},
components:{
"xImage":Images
}
}
第五步:
在子頁面接收剛才信號燈發(fā)過來的東西，有人以為直接把imgs1放進(jìn)去就行了，大錯特錯哦?。。?！
他接受的不是數(shù)據(jù)，而是我說的信號燈
所以用props接收這個信號燈，然后把信號燈做一個要求，我只要這樣品質(zhì)的土豆！其他的我不要
<template>
<img :src="xxoo" alt="">
</template>
<script>
export default{
data(){ ... },
props:{
xxoo:String
}
}
</script>
以下就是土豆有幾種類型
- String : 普通的 'xxxxx'
- Number : 只要 123456789
- Boolean: 只要true 或者 false
- Array:單個的變量儲多個值 [1,2,3]
- Object:對象{a:1,b:2}
到此這篇關(guān)于Vue的props父傳子的示例代碼的文章就介紹到這了,更多相關(guān)Vue props父傳子內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
拖拽插件sortable.js實(shí)現(xiàn)el-table表格拖拽效果
本文主要介紹了拖拽插件sortable.js實(shí)現(xiàn)el-table表格拖拽效果，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
vue使用less報錯:Inline JavaScript is not ena
這篇文章主要介紹了vue使用less報錯:Inline JavaScript is not enabled問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
Vue.js動態(tài)添加、刪除選題的實(shí)例代碼
這篇文章主要介紹了Vue.js動態(tài)添加、刪除選題的實(shí)例代碼,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-09-09
vue路由權(quán)限和按鈕權(quán)限的實(shí)現(xiàn)示例
本文主要介紹了vue路由權(quán)限和按鈕權(quán)限的實(shí)現(xiàn)示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這篇文章主要介紹了Vue3在history模式下如何通過vite打包部署白屏問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07
vue項(xiàng)目中跳轉(zhuǎn)到外部鏈接的實(shí)例講解
今天小編就為大家分享一篇vue項(xiàng)目中跳轉(zhuǎn)到外部鏈接的實(shí)例講解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue中slot-scope的深入理解（適合初學(xué)者）
這篇文章主要給大家介紹了關(guān)于Vue中slot-scope的深入理解，這個教程非常適合初學(xué)者,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要和大家一起學(xué)習(xí)vue.js條件渲染，代碼注釋詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
關(guān)于Vue 自定義指令實(shí)現(xiàn)元素拖動的詳細(xì)代碼
這篇文章主要介紹了Vue 自定義指令實(shí)現(xiàn)元素拖動,在使用自定義指令之前，先對自定義指令有一定的了解，主要從自定義指令定義范圍，鉤子函數(shù)方面入手，需要的朋友可以參考下2022-01-01
用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果
這篇文章主要介紹了用vue2.0實(shí)現(xiàn)點(diǎn)擊選中active其他選項(xiàng)互斥的效果，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04