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狀态管理

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!