溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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中有哪些通信傳值方式的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
