vue項目props傳值類型影響：單項數據流及雙向數據流

第一：傳遞string、number等基本數據類型：
在構建vue項目中，props是子組件獲取父組件的一種形式；在子組件中不可修改父組件傳遞的參數，代碼以下：
一、父組件代碼：

<template>
  <div class="hello">
    <childComponent @touchParentFuc="touchParentFuc" :fatherPassChild="fatherPassChild"></childComponent>
  </div>
</template>

<script>
import childComponent from './childComponent'
export default {
  name: 'HelloWorld',
  components: {
    childComponent
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      fatherPassChild: '父傳子'
    }
  },
  methods: {
    touchParentFuc () {
      console.log(this.fatherPassChild)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

2子組件代碼：

<template>
  <div class="hello">
    <div>這是子組件</div>
    <div>這是父組件的值：{{fatherPassChild}}</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['fatherPassChild'],
  created () {
    this.touchParentFuc()
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    touchParentFuc () {
      this.fatherPassChild = '888'
      this.$emit('touchParentFuc')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

註釋：
頁面展現子組件修改後的值：
「這是子組件
這是父組件的值：888」；
在子組件中，嘗試修改父組件傳遞過來的值，此時chrome控制檯會報錯:
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "fatherPassChild"；
同時，父組件中，打印的字段爲修改以前的字段:
父傳子 。

第二：傳遞數組、對象等引用型數據類型：
若是經過props傳遞引用數據類型，在子組件中改修父組件的屬性值，會出現什麼狀況？擼碼以下：
一、父組件代碼：

<template>
  <div class="hello">
    <childComponent @touchParentFuc="touchParentFuc" :fatherPassChild="fatherPassChild"></childComponent>
  </div>
</template>

<script>
import childComponent from './childComponent'
export default {
  name: 'HelloWorld',
  components: {
    childComponent
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      fatherPassChild: {
        objData: 'my is object'
      }
    }
  },
  methods: {
    touchParentFuc () {
      console.log(this.fatherPassChild)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

2子組件代碼：

<template>
  <div class="hello">
    <div>這是子組件</div>
    <div>這是父組件的值：{{fatherPassChild.objData}}</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: ['fatherPassChild'],
  created () {
    this.touchParentFuc()
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  },
  methods: {
    touchParentFuc () {
      this.fatherPassChild.objData = 'object is my'
      this.$emit('touchParentFuc')
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>

註釋：

此時，頁面展現的內容是子組件修改後；同時，控制檯並無報錯；why？

按照官網的解釋：

注意在 JavaScript 中對象和數組是經過引用傳入的，因此對於一個數組或對象類型的 prop 來講，在子組件中改變這個對象或數組自己將會影響到父組件的狀態。

簡單總結：一、在使用props傳遞數據的過程當中，若是傳遞的是基本數據類型，則在子組件中不能修改父組件傳遞過來的值，此時符合cue的單向數據流方式；

二、若是傳遞的是引用型數據類型，則此時能夠在子組件操做父組件傳遞過來的值，此時數據能夠雙向通訊，違背單向數據流方式。

我的理解，props傳遞參數不一樣，影響子組件是否能更改父組件props傳遞的值；跟const聲明變量相似。