一、vuex作為狀態管理，用起來還是蠻方便的，但是最近某個專案遇到個情況，有東西和vuex衝突了，很多傳值的地方只能通過元件之間的通訊來解決。下面簡單記錄下，父與子，子與父之間的一些傳值方法。

二、父元件向子元件傳值

<template>
  <div>
    <Child 
      :time="year"
      :xiaoming="person">
    </Child>
  </div>
</template>

<script>
import Child from "~/components/Child.vue";
export default {
  layout: "default",
  components: {
    Child
  },
  data() {
    return {
      year   : '8102.',//  傳給子元件的字串
      person : {age:18,sex:'male',name:'xiaoming'},
    };
  },

};
</script>
 

這裡是父元件給子元件傳了兩個值，一個字串，一個物件

<template>
  <div>
    <div>{{year}}</div>
    <div>{{xiaoming.age}}</div>
  </div>
</template>

<script>
export default {
  props: {
    year:String,
    xiaoming:Object,
    default(){
      return []
    }
  },
  data() {
    return {
    };
  },
};
</script>

<style lang="less" scoped>
</style>
 

這邊是子元件從父元件中獲取到傳過來的值並且渲染到頁面上。

總結一下有幾點

1. 子元件在props中建立一個屬性，用以接收父元件傳過來的值

2. 父元件中註冊子元件

3. 在子元件標籤中新增子元件props中建立的屬性

4. 把需要傳給子元件的值賦給該屬性