vue组件

    <div id="app">
        <ul>
            <my-component v-for="item in items" v-bind:item="item"></my-component>
        </ul>
    </div>
    <script type="text/javascript">
        //定义组件my-component是组件名称
        Vue.component("my-component", {
            props: ["item"],//传的参数
            template: '<li>{{item}}</li>'//模板
        })
        var vue = new Vue({
            el: "#app",
            data:{items:["迪丽热巴","杨幂","刘亦菲"]}
        })
    </script>

<div id="app">

         <ul>

            <my-component :newlist="list"></my-component>

         </ul>

    </div>

    <script>

     Vue.component('my-component',{

        props:["newlist"],

        template:'<li >{{newlist}}</li>'//模板

        

     })   

    const vue=new Vue({

        el:'#app',

        data:{

           list:[

           "迪丽热巴","杨幂","刘亦菲"

           ]

        }

    })

    </script>

 

运行图：

总结：

Vue.component是一个定义组件的命令，props是为了给这个组件绑定相关的数据，首先data里的items数据通过v-for="item in items"传给参数item，然后通过

v-bind:item="item" 绑定数据到 props: ["item"]然后再将参数传给 <li>{{item}}</li>。