Vueのpropsの親传子のコード例

いらぬことを言わないで、父は子を伝えて比喩をします。
トップページに画像を追加したいですが、毎回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>

ステップ3：xImageをHTMLに入れる

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

第四歩：父の伝子を始めて、誰が父か息子か分からない人がいます。HTMLで名前をつけることができるのは父で、importが入ってくるのは間違いなく子です。
：xoo：盲目の名前をつける信号は、サブページに伝えるために使用されます。ジャガイモはサツマイモです。
imgs 1：これは信号を発射しようとするものです。

<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
    }
}

ステップ5:
サブページで先ほど信号が送られてきたものを受け取って、直接imgs 1を入れればいいと思っている人がいます。大間違いです。
彼が受け取ったのはデータではなく、私が言った信号です。
だから、この信号をプロpsで受信して、信号を要求します。このような品質のジャガイモだけが必要です。他にはいらないです

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

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

以下はジャガイモの種類です。

String：普通のxxxxx'

Number：12345789だけで

です。

Boolean:trueまたはfalse

だけでいいです。

Aray：単一の変数は複数の値を記憶する[1,2,3]

Object:オブジェクト{a:1,b:2}

ここでVueのpropsの父伝子さんのサンプルコードについての文章を紹介します。Vue propsの父伝子の内容については以前の文章を検索してください。または下記の関連記事を引き続きご覧ください。これからもよろしくお願いします。