2018-09-20 组件嵌套

将子组件数据传到父组件里

<div id="app">
    <you-father></you-father>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('you-father',{
        template:`
        <div>
            <h1>父组件</h1>
            <you-child v-bind:num="msg"></you-child>
        </div>
        `,
        data:function(){
            return{
                msg:"What are you doing now?"
            }
        }
    });
    Vue.component('you-child',{
        props:["num"],
       template:`
       <div>
           <h2>子组件</h2>
           <img src="../img/2.jpg" alt="">
           <a href="">{{num}}</a>
       </div>
       `
    });
    new Vue({
        el:"#app"
    });
</script>

父传子的嵌套

<div id="app">
<you-market></you-market>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('you-market',{
        template:`
        <div>
            <you-tit v-bind:tit="title"></you-tit>
            <you-fruit v-bind:fruList="list"></you-fruit>
        </div>
        `,
        data:function(){
            return{
                list:["apple","pear","banana"],
                title:"水果促销"
            }
        }
    });
    Vue.component('you-tit',{
        props:["tit"],
        template:`
        <div>
            <h1>{{tit}}</h1>
        </div>
        `
    });
    Vue.component('you-fruit',{
        props:["fruList"],
        template:`
            <ul>
                <li v-for="value in fruList">{{value}}</li>
            </ul>
        `
    });
    new Vue({
        el:"#app"
    });
</script>