（1） list:自定义组件 li:要替换的组件 components:注册函数 template:替换的关键字 （2）参数传递:props:[数据1,数据2]接受数组类型值,可以把父类组件的值传给子类组件
全局组件
全局组件 Vue.component("list",{ template:"<li>{{cons}}</li>", props:["cons"] })局部组件
components:{//局部注册 // list父类组件 li子类组件 template替换关键字 "list":{ template:"<li>{{cons}}</li>", props:["cons"]//获得标签里的属性 } }, <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="vue.js"></script> </head> <body> <div id="app"> <input type="text" v-model="msg"> <input type="button" value="添加" @click=add> <ul> <list v-for="value in arr" v-bind:cons="value">{{value}}</list> </ul> </div> <script> //全局组件 // Vue.component("list",{ // template:"<li>{{cons}}</li>", // props:["cons"] // }) new Vue({ el:"#app", data:{ msg:"", arr:[] }, components:{//局部注册 // list父类组件 li子类组件 template替换关键字 "list":{ template:"<li>{{cons}}</li>", props:["cons"]//获得标签里的属性 } }, methods:{ add:function(){ this.arr.push(this.msg) } } }) </script> </body> </html>