vue组件间通信传递数据的三种方式（路由传参、父子组件传参、兄弟组件传参） |
您所在的位置：网站首页 › vue父子组件间的参数传递是如何做到的 › vue组件间通信传递数据的三种方式（路由传参、父子组件传参、兄弟组件传参） |
|
前言：
vue组件间通信对于经常来写vue的伙伴来说应该是很轻松的，对于一些刚入门的伙伴来说可能就有些不明就里了，感觉方式有很多种，但是总结起来又不知道应该怎么说，在下面的文章中，我集合自己的开发过程中经常用到的方式来做一个总结，也相当于是给自己做一个总结，毕竟在vue中，组件间的通信也是非常重要的一个环节。在写作过程中如果有什么不对的地方，请看到的大神能帮忙指出，如果本文能帮助到您，不胜荣幸。 相关通信方式 props 和 emits传参路由传参（query、params）第三方库（pubsub-js） … 1、props 和 emits 传参 （父子组件传参）使用props传参应该是vue里面用的最多的，因为是vue自带的传参方式，通过prop和emit传递参数，书写代码很简单，使用起来也是很方便的。但是通常我们是用来作为父子间组件传参，如果是兄弟组件传参就没有那么方便了（当然也不是不可以，只是会麻烦一点） 两种方式使用props和emits 1.1 普遍的方式（感觉身边同事都是这种写法🌚） 🚉 这里是父组件，名字App import Test from "@/components/Test.vue"; export default defineComponent({ name: "App", components: { Test }, setup(){ const getData = (e) => { console.log(e) //输出从子组件哪里得到的数据 }; return {getData} } )} 🚗 这里是子组件，定义名字为Test 传参给父组件 import { defineComponent} from "vue"; export default defineComponent({ name: "Test", components: {}, props: { name: { type: String, default: '', }, isMan: { type: Boolean, default: true, }, age:{ type:Number, default:0 } }, emits: ['sendData'], setup(props,{emit}) { console.log(props) //输出父组件通过传过来的参数 const test = () => { emit("sendData", '参数送过来了，父组件，查收一下');//第一个是在父组件中定义的方法，第二个是传递参数 }; return { test }; }, }); 1.2 vue推荐的方式，也是自己比较喜欢的方式，使用setup语法糖方法和上面都差不多，主要的区别在于 < script>标签的写法，请仔细看我们下面的代码，看不同之处，是不是看起来简洁了很多呢 🚉 这里是父组件，名字App //这里就直接在script标签上写上setup，就可以使用语法糖了，简洁高效 import Test from "@/components/Test.vue"; const getData = (e) => { console.log(e) //输出从子组件哪里得到的数据 }; 🚗 这里是子组件，定义名字为Test 传参给父组件 import { defineProps,defineEmits } from "vue"; const props = defineProps({ name: { type: String, default: '', }, isMan: { type: Boolean, default: true, }, age:{ type:Number, default:0 } )} const emits = defineEmits(['sendData']) console.log(props) //输出父组件通过传过来的参数 const test = () => { emits("sendData", '参数送过来了，父组件，查收一下');//第一个是在父组件中定义的方法，第二个是传递参数 };是不是觉得第二种用语法糖的方式简单很多呢 2、路由传参【query、params】（仅限于路由跳转使用）传参方式直接可观，通过路由传参，可以很便捷的将参数传给下一级路由。 通常使用query传递基本类型的数据（如：字符串，整型等） params传递引用类型的参数（如：对象、数组等） query传递的参数可以直接在我们的URL地址栏中可以看到（基本上在地址栏的问号（?）后面） params传递的参数需要在控制台中去看，也可以利用浏览器中的vue插件进行查看 下面给大家两个代码示例看一下应该就很好理解了（这里使用的是vue2的写法，vue3路由的写法需要使用两个函数【useRoute, useRouter】使用方式相较于vue2的写法有一点点差距，如果写过react的朋友就很清楚了，这两个钩子和react的hooks是类似的。先给大家简单演示一下vue3怎么进行路由传参吧） vue3路由写法 当前路由传参 import { useRoute, useRouter } from "vue-router"; //导入两个方法 const route = useRoute(); const router = useRouter(); const goTest = () => { router.push({ name:"Test",//路由组件配置定义的名字 query:'测试数据传递' }); }; 下级路由接收参数 import {useRoute} from 'vue-router' const route = useRoute(); console.log(route.query)关于vue3 params传参可以看看下面的params，一个写法。这里就不做多赘述了。但要提醒以下两点： vue3使用params传参的时候版本过高有的时候会提示params参数丢失。可以参考修改一下vue-router的版本在vue3中params传递参数被认为是不可靠的，因为在刷新页面的时候，params传递的参数会消失，如果我们使用了params传参，可能会导致页面数据丢失，因此vue3中，我们就尽量不要使用params传递参数了，同时也被认为是路由中的一种反模式，具体的详细信息可以参考： https://github.com/vuejs/router/blob/main/packages/router/CHANGELOG.md#414-2022-08-22 2.1 query 当前本级路由的代码，使用query来传递一个ID this.$router.push({ //Test表示我们进入下一级路由的名字，这个name也可以换成path，但是相对应的参数也需要修改，主要看得是我们在vue路由中怎么定义的 name: 'Test', query: { ID } }); 下一级接收参数 路由代码 created () { //生命周期函数 console.log(this..$route.query.ID) //输出我们这一级通过路由query得到的ID } 2.2 params和query类似，换汤不换药 当前本级路由的代码，使用query来传递一个ID this.$router.push({ name: 'Test', params: { person:{ID:'93808',age:12,name:'张三'} } }); 下一级接收参数 路由代码 created () { //生命周期函数 console.log(this..$route.params.person.ID) //输出我们这一级通过路由params得到的ID console.log(this..$route.params.person.age) console.log(this..$route.params.person.name) } 3、pubsub-js（兄弟组件传参）这是一个第三方库，需要安装 npm install pbusub-js个人主要是用在兄弟传参上的，因为在兄弟传参上，再使用props或者emits就太麻烦了，因为这个确实比较简单我就不多说了，直接看下代码。 然后记一下它两个比较重要的方法 publish() : 消息发布 subscribe()：消息订阅 🚓兄弟组件Test.vue Test组件 import PubSub from "pubsub-js"; const sendData = ()=>{ PubSub.publish('test', '发送数据给Test1') } 🚕 兄弟组件Test1.vue Test1组件 import PubSub from "pubsub-js"; PubSub.subscribe('test', (_, value) => { console.log(value) }) 总结最后也简单总结一下，在使用vue中，使用这三种方式基本可以覆盖完我们写vue时面临的组件间传参遇到的问题了，其中 路由传参仅限于路由跳转之间参数的传递方式 props和emits用于父子组件间传参 pubsub-js属于第三方库，用于兄弟组件传参比较方便。 至于具体使用那种，主要看自己项目以及个人习惯 本次文章分享就到这里，谢谢各位的阅览，因为基本是手写的，所以代码上以及文章上有什么问题请在评论区指出。再次感谢 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |