廢話不多少，父?jìng)髯幼鲆粋€(gè)比喻

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

步驟如下:

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

<template>
  <div>
    <img src="./xxx.xx" alt="">
  </div>
</template>

<script>
  export default{
    data(){
      return{}
    }
  }
</script>

第二步:在首頁(yè)這邊引入該頁(yè)面

<script>
  import Images from "../../../components/imgs.vue"
  export default{
    data(){
      return{}
    },
    components:{
      "xImage":Images
    }
  }
</script>

第三步:把xImage放在HTML里

<template>
    <xImage :xxoo="imgs1"></xImage>
</template>

第四步:開始父?jìng)髯?，有人不知道誰(shuí)是父誰(shuí)是子。能在HTML瞎起名的就是父，import入進(jìn)來的肯定就是子了

:xxoo : 瞎起名的信號(hào)燈，用來告訴子頁(yè)面，土豆土豆我是地瓜

imgs1 : 這就是信號(hào)燈準(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
    }
}

第五步:

在子頁(yè)面接收剛才信號(hào)燈發(fā)過來的東西，有人以為直接把imgs1放進(jìn)去就行了，大錯(cuò)特錯(cuò)哦?。。。?br /> 他接受的不是數(shù)據(jù)，而是我說的信號(hào)燈
所以用props接收這個(gè)信號(hào)燈，然后把信號(hào)燈做一個(gè)要求，我只要這樣品質(zhì)的土豆！其他的我不要

<template>
    <img :src="xxoo" alt="">
</template>

<script>
  export default{
    data(){ ... },
    props:{
      xxoo:String
    }
  }
</script>

以下就是土豆有幾種類型

• String : 普通的 'xxxxx'
• Number : 只要 123456789
• Boolean: 只要true 或者 false
• Array:單個(gè)的變量?jī)?chǔ)多個(gè)值 [1,2,3]
• Object:對(duì)象{a:1,b:2}

到此這篇關(guān)于Vue的props父?jìng)髯拥氖纠a的文章就介紹到這了,更多相關(guān)Vue props父?jìng)髯觾?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論