组件（父传子）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li{
            list-style: none;
        }
    </style>
</head>
<body>
<div id="app">
   <my></my>
</div>
<script src="js/vue.js"></script>
<script>
    Vue.component('my',{
        template:`
                <div>
                <my1 v-bind:num="mag"></my1>
                <my2 v-bind:num1="mass"></my2>
                </div>
        `,
        data:function(){
            return{
                mag:'水果列表',
                mass:['苹果','香蕉','鸭梨']
            }
        },
    })
    Vue.component('my1',{
        props:['num'],
        template:`
            <div>
            <h3>{{num}}</h3>
            </div>
        `
    })
    Vue.component('my2',{
        props:['num1'],
        template:`
        <div>
           <ul>
               <li v-for="w in num1">{{w}}</li>
           </ul>
        </div>

        `
    })
    new Vue({
        el:'#app'
    })
</script>
</body>
</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容