天天看點
傳回

小白都能看懂的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狀态管理

  • 狀态管理使用起來相對複雜，但是對于大型項目确實非常實用的。
    (1)安裝vuex，并建立倉庫檔案 
npm install vuex -s
  • 安裝過後在src檔案中建立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）狀态的讀取和送出

  • 還是使用上面的案例，我們以子元件About送出改變狀态，父元件Head接受狀态并顯示出來
  • 下面是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.$store.commit("MESSAGE_INFO" , "我是火車王")   //送出改變狀态
    }
  }
}
</script>
<style scoped>

</style>
  • Head元件接受狀态： 
<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什麼的，适用于中小型項目，但是我用的比較少，一般上面的幾種在開發中已經夠用的，例子很簡單，學習是永無止境的，具體更深的東西還得下功夫去研讀官網或者其他資料，本文中有不對的地方或者疑惑的地方，還望大家多多指教！謝謝。
vue通信
上一篇: @autowired注解注入為null_spring中Autowired(required=false)注入注意的問題
下一篇: 【雜談】tocmat是何時寫回響應資料報的

繼續閱讀