父组件data列表传递参数至子组件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <itembox :mydes="item" v-for="item in arrs"></itembox>  
    </div>
</body>
</html>
<script>
    var itembox = {  //子组件
                template:`
                <div style="background:#efefef; margin:10px">
                    <h1 @click="clickH1">冒险岛</h1>
                    <h2>{{mydes}}</h2> 
                </div>
                `,
                props:["mydes"],
                data(){ //子组件用于存放数值的地方，并且要求data是方法。
                    return {  // 必须要使用return才能将属于返回，区别于Vue对象的data键值用法
                         des:"PYTHON"
                    }
                },
                methods:{  // 子组件所绑定的方法
                    clickH1(){
                        console.log(123)
                    }
                }
            }

    new Vue({  // 父组件
        el:"#app",
        data:{
            arrs:["哈哈","呵呵","嘻嘻","霍霍","啦啦"]
        },
        methods:{
    
        },
        components:{
            itembox
        }
    })
</script>

第40行在父组件中的data中新建一个数组arrs，并且添加元素
第12行首先使用v-for循环读取父组件中的arrs,然后使用v-bind将item与标签属性mydes绑定（item是js变量，所以需要绑定，否则只会输出字符串）

父组件data对象传递参数至子组件

除了单个字符串作为数组元素传递给子组件，循环的元素也可以是对象，子组件可以调用对象的属性。

如:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <itembox :title="item.title" :description="item.description" v-for="item in arrsObj">
        </itembox>  
    </div>
</body>
</html>
<script>
    var itembox = {  //子组件
                template:`
                <div style="background:#efefef; margin:10px">
                    <h1 @click="clickH1">{{title}}</h1>
                    <h2>{{description}}</h2> 
                </div>
                `,
                props:["title","description"],
                data(){ //子组件用于存放数值的地方，并且要求data是方法。
                },
                methods:{  // 子组件所绑定的方法
                    clickH1(){
                        console.log(123)
                    }
                }
            }

    new Vue({  // 父组件
        el:"#app",
        data:{
            arrsObj:[
                {
                    title:"芜湖",
                    description:"大司马"
                },
                {
                    title:"冒险岛",
                    description:"好玩不花钱"
                },
                {
                    title:"啊哈",
                    description:"蜜雪冰城"
                }
            ]
        },
        methods:{
    
        },
        components:{
            itembox
        }
    })
</script>