廢話不多少，父傳子做一個比喻

首頁想加一個圖片，但又不想每次都用img而且又讓img做css和動畫事件。此時最簡單的方法做一個頁面封裝，然后起一個名字讓首頁自己獲取，放一個地址就行！其他什么都不用管。

步驟如下:

第一步:創(chuàng)建一個組件，相當(dāng)于創(chuàng)意文件夾，專門存小東西以后經(jīng)常用

<template> <div> <img src='http://www.gepszalag.com/bcjs/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 : 這就是信號燈準備發(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放進去就行了，大錯特錯哦！！！！他接受的不是數(shù)據(jù)，而是我說的信號燈所以用props接收這個信號燈，然后把信號燈做一個要求，我只要這樣品質(zhì)的土豆！其他的我不要

<template> <img :src='http://www.gepszalag.com/bcjs/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)容請搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！