vue中各種通信傳值方式總結(jié)

更新時間：2019年02月14日 11:51:55 作者：陌上花早

在本篇文章里小編給大家分享了關(guān)于vue中各種通信傳值方式的相關(guān)知識點，有興趣的朋友們學(xué)習(xí)下。

1、路由通信傳值

路由通信是通過路由跳轉(zhuǎn)用query把參數(shù)帶過去，也是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:"我是阿格斯之盾" } }) //路由跳轉(zhuǎn)，并用query帶過去參數(shù)
 }
 }
}
</script>
<style scoped>

</style>

創(chuàng)建另一個組件About并在路由注冊

<template>
 <div id="about">
 <p>我是關(guān)于頁:{{ message }}</p><button type="button" @click="handleChange">回到首頁</button> //顯示接收過來的數(shù)據(jù)
 </div>
 
</template>

<script>

export default {
 name: 'About',
 data () {
 return {
  message: "" 
 }
 },
 mounted(){
 this.message = this.$route.query.text //在生命周期中接收傳過來的數(shù)據(jù)
 },
 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的特點就是瀏覽器關(guān)掉緩存就會消失，這是它區(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>我是關(guān)于頁:{{ 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，還是用上面的例子，父組件傳遞一句話給子組件，如果傳遞的參數(shù)很多，可使用json數(shù)組{}的形式。

例子： Head父組件代碼

<template>
 <div id="head">
  <About :text=message></About> //將message參數(shù)傳給子組件
 </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>我是關(guān)于頁:{{ text }}</p>
 </div>
</template>

<script>

export default {
 name: 'About',
 props:{
 'text':[] //子組件接受數(shù)據(jù)，[]里面可以寫傳入類型，如果不符合會報錯
 },
 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就是子組件傳過來的內(nèi)容
  this.message = data
 }
 }
}
</script>
<style scoped>

</style>

5、vuex狀態(tài)管理

狀態(tài)管理使用起來相對復(fù)雜，但是對于大型項目確實非常實用的。

(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接受數(shù)據(jù)顯示
 </div>
 
</template>

<script>
 import About from '@/components/About.vue'
export default {
 name: 'Head',
 components:{
 About
 },
 data () {
 return {
  message : ""
 }
 },
 mounted(){
 
 },
 methods:{

 }
}
</script>
<style scoped>

</style>

總結(jié)：以上就是vue中的通信方式，當(dāng)然還有一些，比如說eventBus什么的，適用于中小型項目，但是我用的比較少，一般上面的幾種在開發(fā)中已經(jīng)夠用的，例子很簡單，學(xué)習(xí)是永無止境的，具體更深的東西還得下功夫去研讀官網(wǎng)或者其他資料，本文中有不對的地方或者疑惑的地方，還望大家多多指教！謝謝。

您可能感興趣的文章: