Vue2.0父子組件之間的傳值

Vue2.0 傳值方式：
在Vue的框架開發的項目過程中，經常會用到組件來管理不同的功能，有一些公共的組件會被提取出來。這時必然會產生一些疑問和需求？比如一個組件調用另一個組件作為自己的子組件，那么我們如何進行給子組件進行傳值呢？如果是電商網站系統的開發，還會涉及到購物車的選項，這時候就會涉及到非父子組件傳值的情況。當然你也可以用Vuex狀態管理工具來實現，這部分我們后續會單獨介紹。我先給大家介紹Vue開發中常用的三種傳值方式。

引用官網的一句話：父子組件的關系可以總結為 prop 向下傳遞，事件向上傳遞。父組件通過 prop 給子組件下發數據，子組件通過事件給父組件發送消息，如下圖所示：

接下來，我們通過實例來看可能會更明白一些：

1. 父組件向子組件進行傳值

父組件：

<template>
  <div>
    父組件:
    <input type="text" v-model="name">
    <br>
    <br>
    <!-- 1.引入子組件 -->
    <child :inputName="name"></child>
    <!-- 2.在子組件中自定義綁定一個用於接收父組件傳值的屬性名inputName，當然這個值等於父組件中data的任意值，例如你需要name的值那就等於name 		然后我們回到子組件中看看，往下看 -->
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    }
  }
</script>

子組件：

<template>
  <div>
    子組件:
    <span>{{inputName}}</span>
    <!-- 4.然后將inputName掛在任意你需要用到的地方即可 -->
  </div>
</template>
<script>
  export default {
    // 3.接受父組件的值，當然是剛才綁定在子組件身上的這個個屬性名inputName用於接收啦，並且最好聲明接收父組件傳過來的值的類型。
    props: {
      inputName: String,
      required: true
    }
  }
</script>

2. 子組件向父組件傳值

<template>
  <div>
    子組件:
    <span>{{childValue}}</span>
    <!-- 定義一個子組件傳值的方法 -->
    <input type="button" value="點擊觸發" @click="childClick">
  </div>
</template>
<script>
  export default {
    data () {
      return {
        childValue: '我是子組件的數據'
      }
    },
    methods: {
      childClick () {
        // childByValue是在父組件on監聽的方法，即方法名咯。
        // 第二個參數this.childValue是需要傳的值
        this.$emit('childByValue', this.childValue)
      }
    }
  }
</script>

父組件：

<template>
  <div>
    父組件:
    <span>{{name}}</span>
    <br>
    <br>
    <!-- 引入子組件 定義一個on的方法監聽子組件的狀態-->
    <child v-on:childByValue="parentByFn"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    },
    methods: {
      parentByFn: function (childValue) {
        // childValue就是子組件傳過來的值
        this.name = childValue
      }
    }
  }
</script>