Vue的自定义组件之间的数据传递
Posted itpyy
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue的自定义组件之间的数据传递相关的知识，希望对你有一定的参考价值。
一，父级传向子级
1，在子级的属性中添加props:[‘myname‘,......]，参数可以传多个，看具体而定；
2，在父级data中定义好需要传递的变量数据，例如name:"rose";
3，在父级template中的子级引用的标签内，利用v-bind:绑定需要传递的数据，例如<son v-bind:myname="name" .....></son>，此时的myname对应子级props所定义的myname，而name对应父级data里的name；
4，此时，在子级中引用{{myname}}就可以得到父级所传递的数据："rose"。
例子如下：
1 // 创建父级组件 2 Vue.component(‘father‘, { 3 template: ` 4 <div class="box"> 5 <h3>父级组件</h3> 6 <p>我儿子的名字叫{{mysonname}}</p> 7 </div> 8 `, 9 // 这里的data要求是函数模式,并且返回一个全新的对象 10 data() { 11 return { 12 mysonname: "Jack", 13 } 14 }, 15 // 创建子级组件 16 components: { 17 son: { 18 template: ` 19 <div> 20 <h4>子级组件</h4> 21 <p>我的名字叫{{myname}}</p> 22 </div> 23 `, 24 // props，组件之间传递参数的关键属性,通过父级的v-bind绑定属性传参 25 props: [‘myname‘, ‘a‘, ‘b‘] 26 } 27 } 28 })
二，子级向父级传递参数
1，在子级方法体重利用this.$emit(‘emitName‘,this.name)把数据发送到上级;
2，在父级方法体中定义方法，例如getName(value){}，用于接收数据;
3，在父级template引用子级标签中写入引用方法@emitName="getName",此时的getName对应父级已定义好的方法getName；
4，父级调用方法getName(value){}，此时的value就等于子级中的this.name;
例子如下：
1 // 创建父级组件 2 Vue.component(‘father‘, { 3 template: ` 4 <div class="box"> 5 <h3>父级组件</h3> 6 <p>儿子，3 + 5 = {{answer}}</p> 7 <son @tellAns="getAns"></son> 8 </div> 9 `, 10 // 这里的data要求是函数模式,并且返回一个全新的对象 11 data() { 12 return { 13 answer: "?" 14 } 15 }, 16 methods: { 17 getAns(res) { 18 // console.log(res); 19 this.answer = res; 20 } 21 }, 22 // 定义子级组件 23 components: { 24 son: { 25 template: ` 26 <div> 27 <h4>子级组件</h4> 28 <button @click="answerQ">回答</button> 29 </div> 30 `, 31 // props，组件之间传递参数的关键属性,通过父级的v-bind绑定属性传参 32 methods: { 33 answerQ() { 34 this.$emit(‘tellAns‘, 8); 35 } 36 } 37 } 38 } 39 })
三，兄弟级之间传递参数
1，创建事件总线let eventBus = new Vue();
2，在A方法体里调用eventBus.$emit("emitName",‘jack‘);
3，在B方法体里接收，eventBus.$on("emiName",(value)=>{})，此时的value就等于A中传递过来的jack。
此方法通用，适合父级传子级，子级传父级，同级之间传递。
例子如下：
<!DOCTYPE html> <html lang="en"> <head> <title>demo</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script src="./vue.js"></script> </head> <body> <div id="app"> <father></father> </div> <script>
//创建事件总线对象 let eventBus = new Vue();
//创建父级组件 Vue.component(‘father‘, { template: ` <div class="father"> <son1></son1> <son2></son2> </div> `,
//创建子级组件 components: { son1: { template: ` <div> <h2>A</h2> <div>B,你叫{{bName}}</div> </div> `, data() { return { bName: "?" } }, mounted() { eventBus.$on("tellName", (value) => { this.bName = value; }) } }, son2: { template: ` <div> <h2>B</h2> <button @click="tellMyName">告诉你</button> </div> `, methods: { tellMyName() { eventBus.$emit("tellName", "jack"); } } } } }) var vm = new Vue({ el: ‘#app‘, data: { } }) </script> </body> </html>
以上是关于Vue的自定义组件之间的数据传递的主要内容，如果未能解决你的问题，请参考以下文章