<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--父组件通过调用v-bind把自己的nameList传递给子组件--> <my-button v-for="(item,index) in nameList" v-bind:key="index" v-bind:name="item" ></my-button> </div> <script src="vue.js"></script> <script> //注册全局组件 子组件 Vue.component("my-button",{ template:`<h1>{{ this.name }}</h1>`, props:["name"], //告诉别人这里需要传入一个name参数 data(){ return{ } } }); // 根实例 父组件 let app = new Vue({ el:"#app", data:{ nameList:["alex","wusir","mjj"] } }) </script> </body> </html>
原文：https://www.cnblogs.com/kenD/p/10230961.html