vue中各種通信傳值方式總結
更新時間：2019年02月14日 11:51:55 作者：陌上花早
在本篇文章里小編給大家分享了關于vue中各種通信傳值方式的相關知識點，有興趣的朋友們學習下。
1、路由通信傳值
路由通信是通過路由跳轉用query把參數帶過去，也是vue常用的通信手段。
例子：創(chuàng)建并在路由注冊一個組件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>
創(chuàng)建另一個組件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的特點就是瀏覽器關掉緩存就會消失，這是它區(qū)別于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) //創(chuàng)建緩存
}
},
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事件發(fā)送的，話不多說，直接上案例，還是利用上面的案例稍作修改 About子組件代碼：
<template>
<div id="about">
<button @click="handleChange">點擊發(fā)送消息給父組件</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狀態(tài)管理
狀態(tài)管理使用起來相對復雜，但是對于大型項目確實非常實用的。
(1)安裝vuex，并建立倉庫文件
npm install vuex -s
安裝過后在src文件中創(chuàng)建store文件夾，并建立index.js文件，index.js的代碼如下：
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
state: {
message: '我是阿格斯之盾'
},
mutations: {
MESSAGE_INFO (state,view) {
state.message = view;
}
}
})
export default store
（2）在min.js中注冊store倉庫 代碼如下：
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
（3）狀態(tài)的讀取和提交 還是使用上面的案例，我們以子組件About提交改變狀態(tài)，父組件Head接受狀態(tài)并顯示出來下面是About組件提交狀態(tài)
<template>
<div id="about">
<button @click="handleChange">點擊發(fā)送消息給父組件</button>
</div>
</template>
<script>
export default {
name: 'About',
props:{
'text':[]
},
data () {
return {
message: ""
}
},
mounted(){
},
updated(){
},
methods:{
handleChange(){
this.$store.commit("MESSAGE_INFO" , "我是火車王") //提交改變狀態(tài)
}
}
}
</script>
<style scoped>
</style>
Head組件接受狀態(tài)：
<template>
<div id="head">
<About></About>
<p>來自子組件的消息：{{this.$store.state.message}}</p> //直接使用this.$store.state.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>
總結：以上就是vue中的通信方式，當然還有一些，比如說eventBus什么的，適用于中小型項目，但是我用的比較少，一般上面的幾種在開發(fā)中已經夠用的，例子很簡單，學習是永無止境的，具體更深的東西還得下功夫去研讀官網或者其他資料，本文中有不對的地方或者疑惑的地方，還望大家多多指教！謝謝。
相關文章
這篇文章主要介紹了vue todo-list組件發(fā)布到npm上的方法,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
這篇文章主要介紹了查找Vue中下標的操作(some和findindex)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
vue項目 npm run build 打包項目防止瀏覽器緩存的操作方法
這篇文章主要介紹了vue項目 npm run build 打包項目防止瀏覽器緩存的操作方法,本文給大家推薦兩種方法，每種方法通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下2022-08-08
這篇文章主要給大家介紹了關于vue3組件式彈窗打開的3種方式,彈窗組件是常見的交互組件,它能夠彈出一些提示信息、提醒用戶進行操作等等,需要的朋友可以參考下2023-07-07
最近項目里集成了百度地圖的一些功能,所以下面這篇文章主要給大家介紹了關于前端小技能之Vue集成百度離線地圖功能的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-01-01
sass或者less都提供變量設置，在需求切換主題的項目中使用less或者sass變量，這篇文章主要介紹了vue引入sass全局變量，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-06-06
這篇文章主要為大家詳細介紹了利用Vue-cli搭建Vue項目框架的相關資料，對大家深入了解Vue有一定的幫助，感興趣的小伙伴可以了解一下2023-02-02
這篇文章主要為大家介紹了uni-popup手擼了一個菜鳥上門取件時間選擇器，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
今天小編就為大家分享一篇快速解決Vue項目在IE瀏覽器中顯示空白的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue-cli 3.0 自定義vue.config.js文件,多頁構建的方法
今天小編就為大家分享一篇vue-cli 3.0 自定義vue.config.js文件,多頁構建的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09