溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

vue 通過 Prop 實(shí)現(xiàn)向子組件傳遞數(shù)據(jù)

發(fā)布時間：2020-11-02 16:07:49 來源：億速云 閱讀：176 作者：Leah 欄目：開發(fā)技術(shù)

vue 通過 Prop 實(shí)現(xiàn)向子組件傳遞數(shù)據(jù)？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style>
      *{
        margin: 0;
        padding: 0;
        text-decoration: none;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <!--數(shù)據(jù)的渲染-->
      <ul>
        <student-component v-for="item in students" :student="item"></student-component>
      </ul>
    </div>
    <script src="../vue.js"></script>
    <script>

      //子組件
      //編寫學(xué)生組件
      Vue.component('student-component',{
        props:['student'], // props 可以是數(shù)組或?qū)ο螅糜诮邮諄碜愿附M件的數(shù)據(jù)。
        template:`<li>
               <h4>學(xué)生的姓名：{{student.name}}</h4>
               <h4>學(xué)生的年齡：{{student.age}}</h4>
               <h4>學(xué)生的興趣：{{student.hobbies}}</h4>
               <hr/>
               <br/>
             </li>`

      })


      //父組件
      let app = new Vue({
        el:'#app',
        data:{
          //把這些數(shù)據(jù)傳給子組件 然后渲染到頁面上
          students:[
            {
              name:'丁七歲',
              age:19,
              hobbies:'吃飯 睡覺 打豆豆'
            },
            {
              name:'丁七歲2',
              age:19,
              hobbies:'吃飯 睡覺 打豆豆'
            },
            {
              name:'丁七歲3',
              age:19,
              hobbies:'吃飯 睡覺 打豆豆'
            }
            ,{
              name:'丁七歲4',
              age:19,
              hobbies:'吃飯 睡覺 打豆豆'
            }

          ]
        }
      })
    </script>
  </body>
</html>

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注億速云行業(yè)資訊頻道，感謝您對億速云的支持。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手