定义使用一个组件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://lib.baomitu.com/vue/2.5.21/vue.js"></script> <title>Document</title> </head> <body> <!--定义组件--> <template id="acc"> <div> {{msg}} <h3>账号</h3> <h3>密码</h3> <button @click="login">登录</button> </div> </template> <!--使用组件--> <div id="app"> <acc1></acc1> </div> <script type="text/javascript"> // 注册组件 Vue.component('acc1',{ template:'#acc', // 组件的数据 data:function(){ return{ msg:"hello" } }, // 组件的方法 methods:{ login:function(){ console.log("执行登录"); } } }); new Vue({ // 管理边界 el:'#app', // 数据 data(){ return { } }, // 方法 methods:{ } }) </script> </body> </html>
父组件传值到子组件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://lib.baomitu.com/vue/2.5.21/vue.js"></script> <title>父组件传值给子组件</title> </head> <body> <!--定义组件--> <template id="acc"> <div> <h1>组件:{{name1}}</h1> </div> </template> <!--使用组件--> <div id="app"> <acc1 :name1="name"></acc1> </div> <script type="text/javascript"> // 注册组件 Vue.component('acc1',{ template:'#acc', // 接收数据 props:{ name1:String //文本用String 数字用Number } }); new Vue({ // 管理边界 el:'#app', // 数据 data(){ return { name:"小明" } }, // 方法 methods:{ } }) </script> </body> </html>
子组件传值到父组件
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="https://lib.baomitu.com/vue/2.5.21/vue.js"></script> <title>子组件传值给父组件</title> </head> <body> <!--定义组件--> <template id="acc"> <div> <h1 @click="sendData">发送数据</h1> </div> </template> <!--使用组件--> <div id="app"> <acc1 v-on:send="getData"></acc1> </div> <script type="text/javascript"> // 注册组件 Vue.component('acc1',{ template:'#acc', methods:{ sendData(input){ this.$emit('send',123); } } }); new Vue({ // 管理边界 el:'#app', // 数据 data(){ return { } }, methods:{ getData(input){ console.log(input); } } }) </script> </body> </html>