vue如何接收传参（vue中各种通信传值方式总结）

1、路由通信传值路由通信是通过路由跳转用query把参数带过去，也是vue常用的通信手段，我来为大家科普一下关于vue如何接收传参?以下内容希望对你有帮助!

vue如何接收传参

1、路由通信传值

路由通信是通过路由跳转用query把参数带过去，也是vue常用的通信手段。

例子：创建并在路由注册一个组件Head

<template> <div id="head"> <button @click="handleChange">clickMe</button> //给按钮绑定点击事件 </div> </template> <script> export default { name: 'Head', data () { return { } }, mounted(){ }, updated(){ }, methods:{ handleChange(){ this.$router.push({ path:"/about" , query:{ text:"我是阿格斯之盾" } }) //路由跳转，并用query带过去参数 } } } </script> <style scoped> </style>

创建另一个组件About并在路由注册

<template> <div id="about"> <p>我是关于页:{{ message }}</p><button type="button" @click="handleChange">回到首页</button> //显示接收过来的数据 </div> </template> <script> export default { name: 'About', data () { return { message: "" } }, mounted(){ this.message = this.$route.query.text //在生命周期中接收传过来的数据 }, updated(){ }, methods:{ handleChange(){ this.$router.push({ path: "/" }) //点击返回首页 } } } </script> <style scoped> </style>

路由注册的简单代码

import Vue from 'vue' import Router from 'vue-router' import Head from '@/components/Head' import About from '@/components/About' Vue.use(Router) export default new Router({ mode: "history", routes: [ { path: '/', name: 'Head', component: Head },{ path: '/about', name: 'About', component: About } ] })

2、sessionStorage本地缓存通信

还是列举上面的例子，将它们稍微改一改就可以了，路由配置都一样的。sessionStorage的特点就是浏览器关掉缓存就会消失，这是它区别于localStorage的。

例子： Heade代码：

<template> <div id="head"> <button @click="handleChange">clickMe</button> </div> </template> <script> export default { name: 'Head', data () { return { } }, updated(){ }, methods:{ handleChange(){ this.$router.push({ path:"/about"}) }, message(){ var message = "我是阿格斯之盾" sessionStorage.setItem('text', message) //创建缓存 } }, mounted(){ this.message(); } } </script> <style scoped> </style>

About代码：

<template> <div id="about"> <p>我是关于页:{{ message }}</p><button type="button" @click="handleChange">回到首页</button> </div> </template> <script> export default { name: 'About', data () { return { message: "" } }, mounted(){ this.message = sessionStorage.getItem("text") //读取缓存 }, updated(){ }, methods:{ handleChange(){ this.$router.push({ path: "/" }) } } } </script> <style scoped> </style>

3、父组件向子组件通信

定义父组件Head，还是用上面的例子，父组件传递一句话给子组件，如果传递的参数很多，可使用json数组{}的形式。

例子： Head父组件代码

<template> <div id="head"> <About :text=message></About> //将message参数传给子组件 </div> </template> <script> import About from '@/components/About.vue' export default { name: 'Head', components:{ About }, data () { return { message : "我是阿格斯之盾" } }, mounted(){ }, methods:{ } } </script> <style scoped> </style>

About子组件代码

<template> <div id="about"> <p>我是关于页:{{ text }}</p> </div> </template> <script> export default { name: 'About', props:{ 'text':[] //子组件接受数据，[]里面可以写传入类型，如果不符合会报错 }, data () { return { message: "" } }, mounted(){ }, updated(){ }, methods:{ handleChange(){ } } } </script> <style scoped> </style>

4、子组件向父组件通信 子组件向父组件通信是通过emit事件发送的，话不多说，直接上案例，还是利用上面的案例稍作修改 About子组件代码：

<template> <div id="about"> <button @click="handleChange">点击发送消息给父组件</button> </div> </template> <script> export default { name: 'About', props:{ 'text':[] }, data () { return { message: "" } }, mounted(){ }, updated(){ }, methods:{ handleChange(){ this.$emit( "child-message" , "我是阿格斯之盾" ) //提交信息 } } } </script> <style scoped> </style>

Head父组件代码

<template> <div id="head"> <About @child-message = "handleText"></About> //这里传过来父组件需要用一个方法接住 <p>来自子组件的消息：{{message}}</p> </div> </template> <script> import About from '@/components/About.vue' export default { name: 'Head', components:{ About }, data () { return { message : "" } }, mounted(){ }, methods:{ handleText(data){ //这里的data就是子组件传过来的内容 this.message = data } } } </script> <style scoped> </style>

5、vuex状态管理

【领取方式】关注头条 前端全栈架构丶第一时间获取最新前端资讯学习手机用户可私信关键词 【前端】即可获取全栈工程师路线和学习资料！

,