小白都能看懂的vue中各種通信傳值方式，附帶詳細代碼
阿新 • • 發佈：2019-02-13
pda com get 庫文件 -s cli 多說 cti method
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中各種通信傳值方式，附帶詳細代碼