vue2.0數據傳遞方法與小技巧

寫這篇文章的時候已經寫了2個vue全家桶項目了,來分享下我從中遇到數據傳遞的困難和臨時解決問題吧!
如下代碼我都採用組件化開發過程進行講解

1.父級傳遞給子級(prop)

father.vue

<template>
    <child :message="message"></child><!--若是想從父級把數據傳給child的話就得先綁定-->
</template>
<script>
import child from "child.vue"
export default {
  name: 'father',
  data () {
    return {
        message:"i am father"
    }
  },
  components:{
      child //註冊子組件
  }
}
</script>

chlid.vue

<template>
    <div>我是子級</div>
</template>
<script>
export default {
  props:['message'],
  name: 'child',
  data () {
    return {
    
    }
  },
  created(){
      console.log(message);//i am father
  }
}
</script>

2.子級傳遞給父級(emit on)搭配使用

father.vue

<template>
    <child></child>
</template>
<script>
import child from "child.vue"
export default {
  name: 'father',
  data () {
    return {

    }
  },
  created(){
    this.$on("mes", (arg) => {
        console.log(arg);//i am child
    })
  },
  components:{
      child //註冊子組件
  }
}
</script>

chlid.vue

<template>
    <div>我是子級</div>
</template>
<script>
export default {
  name: 'child',
  data () {
    return {
      message:"i am child"
    }
  },
  created(){
      this.$emit('mes', this.message)
  }
}
</script>


不過要注意子級傳父級的this必定要指向同一個實例,否則會報錯。若是不能指向同一個實例可進行建立一個實例bus.js。代碼以下

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

而後在father.vue和child.vue引入此js,把this改爲引入此js的命名就好，好比

import { bus } from "bus.js"; 改爲bus.emit("mes",this.message)和 bus.on("mes",(arg)=>{})便可

3.兄弟組件傳值

剛開始遇到這個問題的時候,我還不知道有vuex的存在,結果用了個讓代碼比較繁瑣的一個方法(項目比較大不推薦)
當建立腳手架的時候會有個App.vue入口組件,組件裏會有個<router-view>標籤。
這個標籤你能夠看成是路由文件的父級,由於前面介紹了prop能夠父級傳給子級數據,那就能依靠這個方法在<router-view>標籤上綁定數據,而後使用prop一步一步傳下去了。

4.Vuex簡單介紹

項目比較大的時候及其推薦Vuex,我這邊簡單作下使用方法,具體看官網,寫的很詳細Vuex。

Vuex:能夠理解就是全局狀態管理的一個插件,理論上全部組件都能拿到Vuex裏面的數據。
State:能夠理解爲組件中的data,就是放數據的地方.
Mutation:能夠理解爲提交數據給data的方法(同步)
Action:能夠理解爲提交數據給Mutation而後經過Mutation再提交給data的方法(異步)
Getter:能夠將data的數據進行過濾,而後組件經過獲取Getter方法來獲取到過濾的data