Vue组件之间的传参
Posted godfather-twq
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue组件之间的传参相关的知识，希望对你有一定的参考价值。
Vue组件之间的传参方式有三种
第一：父传子
第二：子传父
第三：兄弟之间相传
第一，父传子，顾名思义，外层组件传参给嵌套内部的组件
在父代中嵌套的标签
<son v-bind:toSon="fatherData"></son> //发送数据给子代
在子代中接收数据
需要添加一个属性叫做prpos
props:["toSon"],
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <father></father> </div> <script type="text/javascript"> Vue.component("father",{ data:function(){ return { fatherData:"我是你爸爸", } }, template:` <div> <h1>我是父代</h1> <input type="text" v-model="fatherData"> <son v-bind:toSon="fatherData"></son> </div> ` }) Vue.component("son",{ props:["toSon"], template:`<div> <h1>我是子代</h1> <span>这是我老爸说的话{{ toSon }}</span> </div>` }) new Vue({ el:"#app", }) </script> </body> </html>
第二，子传父，
子代传给父代需要使用方法，具体看代码注释
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <father></father> </div> <script type="text/javascript"> Vue.component("father",{ data:function(){ return { fatherData:"我是你爸爸", msg:"", } }, methods:{ resSonData:function(data){ //父代用来接收子代传送的数据 this.msg = data; } }, template:` <div> <h1>我是父代</h1> <span>这是我儿子说的话{{ msg }}</span> <son v-on:toFatherSonData="resSonData"></son> //要在子代上面绑定方法 //这个v-on后面的参数是一个事件类型名称，=号后面的是方法名 </div> ` }) Vue.component("son",{ data:function(){ return { sonData:"我是你儿子", } }, methods:{ toFather(){ //子代向父代发送数据的方法 this.$emit("toFatherSonData",this.sonData); // 第一个参数，这是我们自定义的事件类型名，不是方法 } }, props:["toSon"], template:`<div> <h1>我是子代</h1> <input type="text" v-model="sonData" @input="toFather"> </div>` }) new Vue({ el:"#app", }) </script> </body> </html>
学完以上两种传参的方式，现在我们来用$refs和$parent两个方法来试试
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>组件之间的传值-$refs&$parent</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <father></father> </div> <script type="text/javascript"> Vue.component("father",{ data:function(){ return { fatherData:"我是父代组件中内容", msg:"", } }, methods:{ chickSon:function(){ console.log(this.$refs.mySon.sonData); } }, template:` <div> <h1>我是父代</h1> <button @click="chickSon">查看子代中内容</button> <son ref="mySon"></son> </div> ` }) Vue.component("son",{ data:function(){ return { sonData:"我是子代组件中内容", } }, methods:{ chickFather:function(){ console.log(this.$parent.fatherData) } }, template:`<div> <h1>我是子代</h1> <button @click="chickFather">查看父代中的内容</button> </div>` }) new Vue({ el:"#app", }) </script> </body> </html>
第三，兄弟组件之间的参数传递
注意：兄弟组件传参必须依靠一个vue实例来进行，
关键方法：
$emit("参数名",callblack) 用来发送数据的方法
$on("参数名",callback) 用来接收数据的方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>兄弟组件之间传递参数</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <bigbrother></bigbrother> <hr> <youngerbrother></youngerbrother> </div> <script type="text/javascript"> // 兄弟组件之间传值必须依靠外界 // 依靠新的一个vue的实例 var vm = new Vue(); Vue.component("bigbrother",{ data:function(){ return { bigBrotherData:"这是哥哥说的话", } }, methods:{ //这是发送数据的方法,定义在methods里面 tellYoungerBrother:function(){ console.log(this) vm.$emit(‘toYoungerBrother‘,this.bigBrotherData);//必须借用Vue的实例来完成数据的传递 } }, created:function(){ //这是接收兄弟发来的信息，需要用一个方法来接收 //关键方法，$on vm.$on(‘toBigBrother‘,function(data){ console.log(data) }) }, template:` <div> <h1>我是哥哥</h1>{{ bigBrotherData }} <button @click="tellYoungerBrother">发送给弟弟</button> <h2>这是弟弟说的话:</h2> </div> ` }) Vue.component("youngerbrother",{ data:function(){ return { youngerBrotherData:"这是弟弟说的话" } }, methods:{ tellBigBrother:function(){ vm.$emit("toBigBrother",this.youngerBrotherData); } }, created : function(){ vm.$on("toYoungerBrother",function(data){ console.log(data); }) }, template:`<div> <h1>我是弟弟</h1> <button @click="tellBigBrother">发送给哥哥</button> <h2>这是哥哥说的话:{{ }}</h2> </div>` }) new Vue({ el : "#app", data : { msg : "hello" } }) </script> </body> </html>
以上是关于Vue组件之间的传参的主要内容，如果未能解决你的问题，请参考以下文章