vue通过Prop实现向子组件传递数据-创新互联

vue 通过 Prop 实现向子组件传递数据？很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。

创新互联建站专注为客户提供全方位的互联网综合服务，包含不限于做网站、成都网站制作、上党网络推广、成都微信小程序、上党网络营销、上党企业策划、上党品牌公关、搜索引擎seo、人物专访、企业宣传片、企业代运营等，从售前售中售后，我们都将竭诚为您服务，您的肯定，是我们大的嘉奖；创新互联建站为所有大学生创业者提供上党建站搭建服务，24小时服务热线：13518219792，官方网址：www.cdcxhl.com

<!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">
      <!--数据的渲染-->
      <ul>
        <student-component v-for="item in students" :student="item"></student-component>
      </ul>
    </div>
    <script src="../vue.js"></script>
    <script>

      //子组件
      //编写学生组件
      Vue.component('student-component',{
        props:['student'], // props 可以是数组或对象，用于接收来自父组件的数据。
        template:`<li>
               <h4>学生的姓名：{{student.name}}</h4>
               <h4>学生的年龄：{{student.age}}</h4>
               <h4>学生的兴趣：{{student.hobbies}}</h4>
               <hr/>
               <br/>
             </li>`

      })


      //父组件
      let app = new Vue({
        el:'#app',
        data:{
          //把这些数据传给子组件 然后渲染到页面上
          students:[
            {
              name:'丁七岁',
              age:19,
              hobbies:'吃饭 睡觉 打豆豆'
            },
            {
              name:'丁七岁2',
              age:19,
              hobbies:'吃饭 睡觉 打豆豆'
            },
            {
              name:'丁七岁3',
              age:19,
              hobbies:'吃饭 睡觉 打豆豆'
            }
            ,{
              name:'丁七岁4',
              age:19,
              hobbies:'吃饭 睡觉 打豆豆'
            }

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

网页题目：vue通过Prop实现向子组件传递数据-创新互联
新闻来源：https://www.cdcxhl.com/article10/dejedo.html

成都网站建设公司_创新互联，为您提供用户体验、Google、App设计、网站收录、网站营销、品牌网站建设

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容