vue所有的傳值方法

阿新 • • 發佈：2020-08-07

Vue六種傳值方式

前言：

六種傳值方式為:

屬性傳值
$refs
$parent
通知傳值(廣播傳值)
本地傳值
路由傳值

在介紹元件傳值之前先明確三種元件關係：父子元件、兄弟元件、無關係元件

上圖關係基於：A、B元件同一時刻只存其一的情況下，其中：

A是C、D、E的父元件，B是F、G、H的父元件
C、D、E是A的子元件，F、G、H是B的子元件
C和D、E是兄弟元件，F和G、H是兄弟元件。但E、F不是兄弟元件
A和B是無關係元件，E和F也是無關係元件

一、屬性傳值

1.可傳值型別

固定值
繫結屬性
方法
本類物件

2.操作步驟

①.父元件呼叫子元件的時候，繫結動態屬性 <htitle mess="父元件給子元件傳值"></htitle>

②. 在子元件裡邊通過props,接收父元件傳過來的值

3.適用場景

僅適用於父元件給子元件傳值

4.屬性介紹

元件屬性定義：

 props:["mess","bindMsg","run","fatherThis"],

子元件驗證也可傳入引數的合法性：

 props:{
        'mess':String,
        'bindMsg':[String, Number],
        'run':Function, 
        'fatherThis':Object,
}

更多props請檢視Vue官網:https://cn.vuejs.org/v2/api/?#props

5.示例程式碼

父元件：

<template>
  <div id="app">
    <htitle mess="父元件給子元件傳值了" :bindMsg="msg" :run="run" :fatherThis="this"></htitle>
  </div>
</template>

子元件

<template>
    <div class="divfirst">
        <span>{{mess}}</span>
        <h1>{{bindMsg}}</h1>
        <button @click="run()">點選呼叫父元件方法</button>
        <button @click="getPrasent()">點選獲取父元件實體（實體拿到可以使用用父元件的方法和屬性了）</button>
    </div>
</template>

<script>
export default {
    props:{
        'mess':String,
        'bindMsg':[String, Number],
        'run':Function, 
        'fatherThis':Object,
    },
    data(){
        return {}
    },
    methods:{
        getPrasent(){
            this.fatherThis.run();
            alert(this.fatherThis.msg);
        } 
    }
}
</script>

二、父元件獲取子元件資料

父元件通過$refs獲取子元件的資料和方法

1.可獲取型別

子元件屬性
子元件方法

2.操作步驟

1.呼叫子元件的時候呼叫一個ref
<v-fgsheader ref="header"></v-fgsheader>
2.在父元件中通過
this.$refs.header.屬性
this.$refs.header.方法

3.適用場景

子元件給父元件傳值

4.示例程式碼

父元件

<template>
    <div class="FGSHome">
        <v-fgsheader ref="header"></v-fgsheader>
        <button @click="getChildProp()">獲取子元件的屬性的值</button>
        <button @click="getChildMethod()">獲取子元件的方法</button>
    </div>
</template>

<script>
import FGSHeader from './FGSHeader.vue'
    export default{

        data(){
            return { }
        },
        components:{
            'v-fgsheader':FGSHeader,
        },
        methods: {
          getChildProp(){
              alert(this.$refs.header.msg);
          },  
          getChildMethod(){
              this.$refs.header.run();
          }
        },
    }
</script>

子元件

<script>
    export default{
        data(){
            return {
                msg:"我是子元件header的值喲"
            }
        },
        methods:{
            run(){
                alert("這是子元件Header的方法+"+this.msg);
            }
        }
    }
</script>

三、子元件獲取父元件資料

子元件通過$parent獲取父元件的資料和方法，這種傳值方式實際上類似於上邊的屬性傳值中父元件給子元件的傳遞了子類物件this,只不過Vue官方給封裝好了。

1.可獲取型別

父元件屬性
父元件方法

2.操作步驟

直接在子元件中使用this.$parent.XX，不需要做任何多餘操作。

3.適用場景

父元件給子元件傳值

4.示例程式碼

子元件

getFatherProp(){
    alert(this.$parent.fatherMsg); 
},
getFatherMethod(){
    this.$parent.fatherRun();
}

四、通知傳值(廣播傳值)

1.可傳值型別

Vue官網只寫了[...args]，故通知/廣播傳值我們定為只傳基本資料型別，不能傳方法。

2.操作步驟

1、新建一個js檔案然後引入vue 例項化vue 最後暴露這個例項

2、在要廣播的地方引入剛才定義的例項

3、通過 VueEmit.$emit('名稱','資料')傳播資料

4、在接收收資料的地方通過 $on接收廣播的資料
VueEmit.$on('名稱',function(){})

3.適用場景

適用於父子元件、兄弟元件間進行傳值。
無關係元件不能用這種方式傳值。(筆者理解是：對於上圖中的A、B元件。假設A廣播通知，B接收通知。掛載A的時候B解除安裝了，也就是說B被記憶體銷燬了,B是接收不到廣播的)

4.屬性介紹

對於通知傳值而言，可以一人廣播，然後多者接收。

5.示例程式碼

vueEvent.js

import Vue from 'vue'
var vueEvents = new Vue();
export default vueEvents;

兄弟元件C(廣播者)

import vueEvents from '../Model/vueEvent.js'

sendEmit(){
      var numbery =  (Math.random()+300).toFixed(3);
      vueEvents.$emit('notifyToNew',this.homeMsg+numbery);
 }

兄弟元件D(接收者)

import vueEvents from '../Model/vueEvent.js'
mounted(){
     var _this = this;
     vueEvents.$on("notifyToNew",function(data_P){
            //注意this的作用域
           console.log('廣播傳過來的值是'+data_P);
          _this.receive = data_P;
    })
}

五、本地傳值

本地傳值方式對於Vue而言有兩種，一種是JS的localStorage，另一種Vuex。

1.可傳值型別

localStorage： String(可通過JSON進行json資料與String之間的轉化)
Vuex:方法、資料、非同步方法

2.操作步驟

2.1 localStorage

存:

localStorage.setItem('tolist',JSON.stringify(this.tolist));

取：

var tolist = JSON.parse(localStorage.getItem('tolist'));

2.2 Vuex

2.1 src新建一個vuex資料夾
2.2 vuex資料夾裡新建一個store.js
2.3 安裝vuexcnpm install vuex --save
2.4 在剛才建立的store.js 中引入vue、vuex 引入vuex 並且use

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

2.5 定義資料 state在vuex中用於儲存資料

var state = {  count:1,}

2.6 定義方法 mutations裡邊放的是方法,方法主要用於改變state裡邊的資料

var mutations = {
    incCount(){
            ++state.count;
   }
}
   //類似於計算屬性  state裡邊的資料改變時候觸發的方法。 可以做一些操作 並且可以有返回值
var getterfl={
         completedCountChange(state){
         return state.count * 2 +'位';
        }
    }

Action 類似於 mutation，不同在於： Action 提交的是 mutation，而不是直接變更狀態。Action 可以包含任意非同步操作

var actionfl = {
  asynIncCount(context){  
//因此你可以呼叫context.commit來提交一個mutation  使用action需要用dispatch
      context.commit('incCount');
  }
}

2.7 例項化 vuex

const store = new Vuex.Store({
            state,//state: state  簡寫
            mutations: mutations,//屬性的簡寫是 mutations
    getters:getterfl,
       actions:actionfl,
})

2.8 對外暴露

export default  store;

2.9 在需要用的地方引入

import store from '../vuex/store.js'

2.10 註冊store ，放在methods,data同級

export default {
    data(){
        return{}
    },
    store:store,
    methods:{
        incCount(){
            this.$store.commit('incCount');
        }
    }
}

2.11 使用vuex
使用資料：this.\$store.state.count
呼叫方法：this.$store.commit('incCount');

3.適用場景

父子元件、兄弟元件、無關係元件任意元件之間的傳值

4.品鑑

Vuex本質上也是一種本地儲存，比localStorage的單純值傳遞多了方法、屬性、非同步方法等功能。但是因為是將內容本地化，所以就會被在瀏覽器中獲取到。

六、路由傳值

1.父元件push使用this.$router.push
2.在子元件中獲取引數的時候是this.$route.params

1 、動態路由傳值

   1.1 配置動態路由
      routes:[
         //動態路由引數  以冒號開頭
         {path:'/user/:id',conponent:User}
       ]

   1.2 傳值
     第一種寫法 :  <router-link :to="'/user/'+item.id">傳值</router-link>
     第二種寫法 : goToUser(id) {
                    this.$router.push( {path:'/user/'+id});
                  }
   1.3 在對應頁面取值
       this.$route.params;  //結果:{id:123}

2、 Get傳值(類似HTMLGet傳值）

 2.1 配置路由
     const routes = [{path:'/user',component:User},]
 2.2 傳值  
     第一種寫法 : <router-link :to="'/user/?id='+item.id">傳值</router-link>
     第二種寫法 : goToUser(id) {
                        //'user' 是路徑名稱
                      this.$router.push({path:'user',query:{ID:id}});
                  }
 2.3 在對應頁面取值
     this.$route.query;  //結果 {id:123}

Tips：路徑傳遞引數會拼接在URL路徑後

3 、命名路由push傳值

3.1 配置路由
   const routes = [{path:'/user',name: 'User',component:User},]
3.2 傳值  
        goToUser(id) {
                //'User' 是路徑重新命名
              this.$router.push({name:'User',params:{ID:id}});
           }
3.3 在對應頁面取值
       this.$route.params;  //結果:{id:123}

Tips：命名路由傳遞引數不在URL路徑拼接顯示

結束語

單一元件間建議使用屬性傳值單，一對多傳值建議廣播傳值，路由傳值需配合路由進行處理，全域性性的值(敏感資訊除外)使用本地快取傳值。父子元件間傳值使用$refs、$parent。元件各種傳值方式各有優劣，諸君請按實際情況選取。

如果您有什麼疑問或者發現書寫歧義，非常感激您能留言~

本文轉載自:https://www.jianshu.com/p/0fb563e04f61

vue所有的傳值方法

Vue六種傳值方式

前言：

一、屬性傳值

1.可傳值型別

2.操作步驟

3.適用場景

4.屬性介紹

5.示例程式碼

二、父元件獲取子元件資料

1.可獲取型別

2.操作步驟

3.適用場景

4.示例程式碼

三、子元件獲取父元件資料

1.可獲取型別

2.操作步驟

3.適用場景

4.示例程式碼

四、通知傳值(廣播傳值)

1.可傳值型別

2.操作步驟

3.適用場景

4.屬性介紹

5.示例程式碼

五、本地傳值

1.可傳值型別

2.操作步驟

2.1 localStorage

2.2 Vuex

3.適用場景

4.品鑑

六、路由傳值

1 、動態路由傳值

2、 Get傳值(類似HTMLGet傳值）

3 、命名路由push傳值

結束語

如果您有什麼疑問或者發現書寫歧義，非常感激您能留言~

相關推薦