通过 Prop 向子组件传递数据

时间:2020-10-28 作者:admin

这是一个通过 Prop 向子组件传递数据的小例子。

通过 Prop 向子组件传递数据
代码:

<!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>
                              <h3>学生的姓名:{{student.name}}</h3>
                              <h3>学生的年龄:{{student.age}}</h3>
                              <h3>学生的兴趣:{{student.hobbies}}</h3>
                              <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>

不再关心dom操作了 专注于数据的渲染。比如这个关注点 就是如何把 students这个数组中的信息渲染到页面上给用户看。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。