Vue复合组件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="./vue/dist/vue.js"></script> </head> <body> <!-- 复合组件 --> <!-- parent -- child-first ,child-second--> <div id="app"> <parent></parent> </div> </body> <script> Vue.component('child-first',{ template:` <h4>第一个孩子{{word}}</h4>`, data :function(){//组件中使用data，必须是函数 return{ word:"hello world" }; } }) Vue.component('child-second',{ template:` <div> <h3>第二个孩子</h3> <div v-for="item in array">{{item}}</div> </div>`, data : function(){ return{ array:['abc','def','gh'] }; } }) Vue.component('parent',{ template:` <div> <child-first></child-first> <child-second></child-second> </div> ` }) var m ={ } var vm = new Vue({ el:"#app", data:m, methods:{ } }) </script> </html>