美文网首页
2018-09-20 组件嵌套

2018-09-20 组件嵌套

作者: 其实_dnhl | 来源:发表于2018-09-20 11:19 被阅读4次

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

    <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>
    

    相关文章

      网友评论

          本文标题:2018-09-20 组件嵌套

          本文链接:https://www.haomeiwen.com/subject/mjmgnftx.html