點擊下載
本文文檔

當前位置：首頁 - 科技 - 知識百科 - 正文

vue中各種通信傳值方式總結

來源：懂視網責編：小采時間：2020-11-27 22:00:55

vue中各種通信傳值方式總結

vue中各種通信傳值方式總結:1、路由通信傳值路由通信是通過路由跳轉用query把參數帶過去，也是vue常用的通信手段。例子：創建并在路由注冊一個組件Head <template> <div id=head> <button @click=handleChange>clickMe<

推薦度：

點擊下載本文 文檔為doc格式

導讀vue中各種通信傳值方式總結:1、路由通信傳值路由通信是通過路由跳轉用query把參數帶過去，也是vue常用的通信手段。例子：創建并在路由注冊一個組件Head <template> <div id=head> <button @click=handleChange>clickMe<

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>

總結：

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

vue中各種通信傳值方式總結

推薦度：

點擊下載本文 文檔為doc格式

標簽： VUE 方式通信

熱門焦點

vue中各種通信傳值方式總結

vue中各種通信傳值方式總結

vue中各種通信傳值方式總結

最新推薦

猜你喜歡

熱門推薦