组件（父传子）

作者: yangmengjiao | 来源:发表于2018-09-24 10:45 被阅读0次

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