组件（父传子）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="app">
            <my-father></my-father>
        </div>
        <script src="../vue(01)/js/vue.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            Vue.component('my-father',{
                template:`
                    <div>
                        <my-tit v-bind:num='title'></my-tit>
                        <my-ti v-bind:n='list'></my-ti>
                    </div>
                `
                ,
                data:function(){
                    return{
                        list:['苹果','香蕉','梨'],
                        title:'水果'
                        
                    }
                }
            })          
            Vue.component('my-tit',{
                props:['num'],
                template:`
                    <p>{{num}}</p>
                `
                ,               
            })
            Vue.component('my-ti',{
                props:['n'],
                template:`
                    <ul>
                        <li v-for='value in n'>{{value}}</li>
                    </ul>
                `
                ,               
            })
            
            new Vue({
                el:'#app'
            })
        </script>
    </body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容