vue父子通信

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="vue.min.js"></script>
</head>
<body>
    <div id="box">
        <ul>
            <!--标签语义话-->
            <li is="veb" v-for="item in list"  :item=item ></li>
        </ul>
    </div>
</body>
    <script>
       //商品信息,父子通信中父到子的传递
       Vue.component("veb",{
           props:["item"],
           //:后的是变量名，双引号必须要有,这个item只能在这个template中使用,相当与是data中的数据
           template:"<li><h1>{{item.name}}</h1><p>{{item.price}}</p></li>",

       })
       var box=new Vue({
          el:"#box",
          data:{
             list:[
                 {
                    name:"苹果",
                    price:"10块一斤"

                 },
                 {
                    name:"香蕉",
                    price:"14块一斤"

                 },
                 {
                    name:"西瓜",
                    price:"12块一斤"

                 },
             ] 
          }
       })

    </script>
</html>