[vue]组件

组件

<div id="app">
    <fruits v-for="fruit in items" v-bind:message="fruit"></fruits>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js"></script>
<script>
    Vue.component("fruits",{
        props:['message'],
        template: '<li>{{message}}</li>'
    })

    var vm = new Vue({
            el: "#app",
            data: {
                items: ["苹果", "香蕉", "桃子"]
            }
        })
    ;
</script>

• v-for="fruit in items"：遍历 Vue 实例中定义的名为 items 的数组，并创建同等数量的组件
• v-bind:message="fruit"：将遍历的 fruit 项绑定到组件中 props 定义的名为 message 属性上；= 号左边的 message 为 props 定义的属性名，右边的为 fruit in items 中遍历的 fruit 项的值