组件的嵌套（父给子传 用属性prop）

<div class='box'>
          <my-father></my-father>
      </div>
      <script src="js/vue.js"></script>
      <script>
          Vue.component("my-father",{
              template:`
                    <div>
                        <my-child v-bind:til="title"></my-child>
                        <my-son v-bind:lis="list"></my-son>
                    </div>
                `,
              data:function(){
                  return{
                      list:["apple","banana","pear"],
                      title:"水果列表"
                  }
              }
          })
           Vue.component("my-child",{
              props:["til"],
              template:`
                    <h1>{{til}}</h1>
                `
          })
          Vue.component("my-son",{
              props:["lis"],
              template:`
                    <ul>
                        <li v-for="value in lis">{{value}}</li>
                    </ul>
                `
          })
            new Vue({
                el:".box"
            })
    </script>

QQ图片20180919152257.png