huanggr
国瑞前端：在项目中，总会有一些交互，在使用vue的时候，就会涉及到传值等操作，本博文就来给大家讲讲父子组件传值的故事！
查看示例的时候请F12（谷歌浏览器）打开console调试框方便看到调试结果
vue父子组件传值常用方法
首先我们来讲在vue组件中常见的几种关系以及涉及到的知识点：
1、父组件向子组件传值
这里会用到props进行传输
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>父组件向子组件中传值</title> <script src="https://www.huanggr.cn/vue/2.5.15/vue.min.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } img { border: 0; } ol, ul, li { list-style: none; } .box { width: 400px; height: 200px; background: red; border: 1px solid yellow; border-radius: 5px; margin: 10px 0 0 10px; } </style> </head> <body> <div id="app"> <!-- 在组件中写成forData，在html中就要写成for-data，并且要动态绑定，obj为父组件中定义的数据 --> <Model :for-data="obj"></Model> </div> </body> </html> <script type="text/javascript"> Vue.component('Model', { props: { forData: { type: Object, default: 'default' } }, data() { return { message: 0 } }, template: ` <div class="box" > <button @click="open">+1</button> <div> 这里是数据：{{forData}} <div> messages的值为：{{message}} </div> <ul>a <li v-for="item in forData">{{item.a}}</li> </ul> </div> </div>`, methods: { open(e) { //父组件传值到子组件 this.message = this.message + 1 this.forData.push({ a: this.message }) } } }) new Vue({ el: "#app", data: { obj: [{ 'a': 1 }, { 'a': 1 }] } }) </script> |
浏览效果请猛戳此处：点击
在组件中写成forData，在html中就要写成for-data，并且要动态绑定，obj为父组件中定义的数据
2、子组件向父组件传值
使用$emit，自定义事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>子组件向父组件中传值</title> <script src="https://www.huanggr.cn/vue/2.5.15/vue.min.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } img { border: 0; } ol, ul, li { list-style: none; } .box { width: 400px; height: 200px; background: red; border: 1px solid yellow; border-radius: 5px; margin: 10px 0 0 10px; } </style> </head> <body> <div id="app"> <!-- 在组件中写成forData，在html中就要写成for-data，并且要动态绑定，obj为父组件中定义的数据 --> <Model :for-data="obj" @on-ok="ok"></Model> </div> </body> </html> <script type="text/javascript"> Vue.component('Model', { props: { forData: { type: Object, default: 'default' } }, data() { return { message: 0 } }, template: ` <div class="box" > <button @click="open">+1</button> <div> 这里是数据：{{forData}} <div> messages的值为：{{message}} </div> <ul>a <li v-for="item in forData">{{item.a}}</li> </ul> </div> </div>`, methods: { open(e) { //父组件传值到子组件 this.message = this.message + 1 this.forData.push({ a: this.message }) //自定义事件使用 this.$emit('on-ok', { 'forData': this.forData, 'message': this.message }) } } }) new Vue({ el: "#app", data: { obj: [{ 'a': 1 }, { 'a': 1 }] }, methods: { ok(e) { console.log('从子组件中传回父组件的值') console.log(e) } } }) </script> |
浏览效果请猛戳此处：点击
3、同一父组件下，两个子组件传值
这里需要用到子组件向父组件传递数据，然后父组件在分发给另一个子组件，复杂的逻辑交互最好使用vuex来进行操作
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>同级组件通讯</title> <script src="https://www.huanggr.cn/vue/2.5.15/vue.min.js"></script> <style type="text/css"> * { margin: 0; padding: 0; } img { border: 0; } ol, ul, li { list-style: none; } .box { width: 400px; height: 200px; background: red; border: 1px solid yellow; border-radius: 5px; margin: 10px 0 0 10px; } </style> </head> <body> <div id="app"> <!-- 在组件中写成forData，在html中就要写成for-data，并且要动态绑定，obj为父组件中定义的数据 --> <Model-one :for-data="hots" @on-ok="ok"></Model-one> <Model-two :for-data="hots" @on-ok="ok"></Model-two> </div> </body> </html> <script type="text/javascript"> Vue.component('ModelOne', { props: { forData: { type: Number, default: 'default' } }, data() { return { message: 0 } }, template: ` <div class="box" > <button @click="open">+1</button> <div>这里是第一个子组件，需要将值传给第二个子组件 ：{{forData}}</div> </div>`, methods: { open(e) { //自定义事件使用 this.$emit('on-ok', { 'message': this.forData + 1 }) } } }) Vue.component('ModelTwo', { props: { forData: { type: Number, default: 'default' } }, data() { return { message: 0 } }, template: ` <div class="box" > <button @click="open">+1</button> <div> 这里是数据：{{forData}} </div> </div>`, methods: { open(e) { console.log(this.forData) //自定义事件使用 this.$emit('on-ok', { 'message': this.forData + 1 }) } } }) new Vue({ el: "#app", data: { hots: 0 }, methods: { ok(e) { this.hots = e.message } }, watch: { hots(e) {} } }) </script> |
浏览效果请猛戳此处：点击
4、不在同一父组件下的两个子组件传值
使用vuex进行状态修改，传值操作，详情访问我写的另一篇博文：
7