vue组件传值
一、父组件向子组件传值
方式一：单一属性
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> </style> </head> <body> <div id='app'> <!-- 用子 --> <Vheader></Vheader> </div> </body> <script type="text/javascript" src="../vue02/js/vue.js"></script> <script type="text/javascript"> // 组件的创建(声子)) // 子组件2，被子组件使用 let Vheader2 = { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { }; }, props: ["msg"], template: ` <div> <h3>{{ msg }}</h3> </div> ` }; // 组件的创建(声子)) // 子组件，被vue实例使用 let Vheader = { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { text1: "快乐style" }; }, template: ` <div> <Vheader2 :msg="text1"></Vheader2> </div> `, // 挂子 components: { Vheader2 } }; // 创建vue对象 var app = new Vue({ el: "#app", data: {}, // 挂子 components: { Vheader } }) </script> </html>
方式二：传值为对象
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> </style> </head> <body> <div id='app'> <!-- 用子 --> <Vheader></Vheader> </div> </body> <script type="text/javascript" src="../vue02/js/vue.js"></script> <script type="text/javascript"> // 组件的创建(声子)) // 子组件2，被子组件使用 let Vheader2 = { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { }; }, props: ["post"], template: ` <div> <h3>{{ post.id }}</h3> <h3>{{ post.title }}</h3> </div> ` }; // 组件的创建(声子)) // 子组件，被vue实例使用 let Vheader = { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { post: { id: 1, title: "hello world" } }; }, template: ` <div> <Vheader2 v-bind:post="post"></Vheader2> </div> `, // 挂子 components: { Vheader2 } }; // 创建vue对象 var app = new Vue({ el: "#app", data: {}, // 挂子 components: { Vheader } }) </script> </html>
方式三：子组件再向子组件传值
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> </style> </head> <body> <div id='app'> <!-- 用子 --> <Vheader></Vheader> </div> </body> <script type="text/javascript" src="../vue02/js/vue.js"></script> <script type="text/javascript"> // 组件的创建 Vue.component('Vbtn', { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { }; }, template: ` <button> {{ id }} </button> `, props: ["id"] }); // 组件的创建(声子)) // 子组件2，被子组件使用 let Vheader2 = { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { }; }, props: ["post"], template: ` <div> <h3>{{ post.id }}</h3> <h3>{{ post.title }}</h3> <Vbtn v-bind:id="post.id"></Vbtn> </div> ` }; // 组件的创建(声子)) // 子组件，被vue实例使用 let Vheader = { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { post: { id: 1, title: "hello world" } }; }, template: ` <div> <Vheader2 v-bind:post="post"></Vheader2> </div> `, // 挂子 components: { Vheader2 } }; // 创建vue对象 var app = new Vue({ el: "#app", data: {}, // 挂子 components: { Vheader } }) </script> </html>
二、子组件向父组件传值
方式一:
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> </style> </head> <body> <div id='app'> <!-- 用子 --> <Vheader></Vheader> </div> </body> <script type="text/javascript" src="../vue02/js/vue.js"></script> <script type="text/javascript"> // 组件的创建 Vue.component('Vbtn', { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { }; }, template: ` <button @click="clickHandler"> {{ id }} </button> `, props: ["id"], methods: { clickHandler() { //this.$emit("父组件中声明的自定义事件", "传值") // 伪代码 this.id = 2 this.$emit("clickHandler") } } }); // 组件的创建(声子)) // 子组件2，被子组件使用 let Vheader2 = { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { }; }, props: ["post"], template: ` <div> <h3>{{ post.id }}</h3> <h3>{{ post.title }}</h3> <Vbtn v-bind:id="post.id" @clickHandler="clickHandler"></Vbtn> </div> `, methods: { clickHandler() { alert(1) } } }; // 组件的创建(声子)) // 子组件，被vue实例使用 let Vheader = { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { post: { id: 1, title: "hello world" } }; }, template: ` <div> <Vheader2 v-bind:post="post"></Vheader2> </div> `, // 挂子 components: { Vheader2 } }; // 创建vue对象 var app = new Vue({ el: "#app", data: {}, // 挂子 components: { Vheader } }) </script> </html>
方式二：参数传递
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> </style> </head> <body> <div id='app'> <!-- 用子 --> <Vheader></Vheader> </div> </body> <script type="text/javascript" src="../vue02/js/vue.js"></script> <script type="text/javascript"> // 组件的创建 Vue.component('Vbtn', { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { }; }, template: ` <button @click="clickHandler"> {{ id }} </button> `, props: ["id"], methods: { clickHandler() { //this.$emit("父组件中声明的自定义事件", "传值") // 伪代码 this.id = 2; this.$emit("clickHandler", this.id) } } }); // 组件的创建(声子)) // 子组件2，被子组件使用 let Vheader2 = { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { }; }, props: ["post"], template: ` <div> <h3>{{ post.id }}</h3> <h3>{{ post.title }}</h3> <Vbtn v-bind:id="post.id" @clickHandler="clickHandler"></Vbtn> </div> `, methods: { clickHandler(val) { alert(val) } } }; // 组件的创建(声子)) // 子组件，被vue实例使用 let Vheader = { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { post: { id: 1, title: "hello world" } }; }, template: ` <div> <Vheader2 v-bind:post="post"></Vheader2> </div> `, // 挂子 components: { Vheader2 } }; // 创建vue对象 var app = new Vue({ el: "#app", data: {}, // 挂子 components: { Vheader } }) </script> </html>
方式三：父组件再向父组件传值
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> </style> </head> <body> <div id='app'> <!-- 用子 --> <Vheader></Vheader> </div> </body> <script type="text/javascript" src="../vue02/js/vue.js"></script> <script type="text/javascript"> // 组件的创建 Vue.component('Vbtn', { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { }; }, template: ` <button @click="clickHandler"> {{ id }} </button> `, props: ["id"], methods: { clickHandler() { //this.$emit("父组件中声明的自定义事件", "传值") // 伪代码 this.id = 2; // 声明事件必须同父组件 this.$emit("clickHandler", this.id) } } }); // 组件的创建(声子)) // 子组件2，被子组件使用 let Vheader2 = { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { }; }, props: ["post"], template: ` <div> <h3>{{ post.id }}</h3> <h3>{{ post.title }}</h3> <Vbtn v-bind:id="post.id" @clickHandler="clickHandler"></Vbtn> </div> `, methods: { clickHandler(val) { alert(val) // 向父组件传递 this.$emit("fatherHandler", val) } } }; // 组件的创建(声子)) // 子组件，被vue实例使用 let Vheader = { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { post: { id: 1, title: "hello world" } }; }, template: ` <div> <Vheader2 v-bind:post="post" @fatherHandler="father_handler"></Vheader2> </div> `, methods: { father_handler(val) { this.post.id = val } }, // 挂子 components: { Vheader2 } }; // 创建vue对象 var app = new Vue({ el: "#app", data: {}, // 挂子 components: { Vheader } }) </script> </html>
三、平行组件间传值
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> </style> </head> <body> <div id='app'> <Vheader1></Vheader1> </div> </body> <script type="text/javascript" src="../vue02/js/vue.js"></script> <script type="text/javascript"> let bus = new Vue(); // 组件的创建 // Test1--》Test2传值 Test2要声明事件（$on） Test1需要触发事件（$emit） // 声明事件与触发事件必须绑定在同一个实例化对象中(BUS) // 声明事件 $on("事件的名字", function(val){}) Vue.component('Test2', { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { }; }, template: ` `, created() { bus.$on("testData", function(val) { alert(val); }) } }); // 组件的创建 // 触发的事件 $emit("Test1中声明的事件", "值") Vue.component('Test1', { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { msg: "我是子组件Test1中数据" }; }, template: ` <button @click="clickHandler">传递</button> `, methods: { clickHandler() { bus.$emit("testData", this.msg) } } }); let Vheader2 = { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { }; }, template: ` <div> <Test1></Test1> <Test2></Test2> </div> ` }; let Vheader1 = { // data必须是一个函数 data:function() { //必须有个return返回，可以为空对象 return { }; }, template: ` <div> <Vheader2></Vheader2> </div> `, components: { Vheader2 } }; // 创建vue对象 var app = new Vue({ el: "#app", data: {}, components: { Vheader1 } }) </script> </html>
https://www.cnblogs.com/WiseAdministrator/
