vue項目中的父子組件之間的傳值。

首先說一下父子組件就是在一個vue文件中引入另外一個vue文件，被引入vue文件就是子組件，引入vue文件的vue文件就是父組件。而在父組件中是不能直接調用子組件中的變量值的。下面詳細說一下，父子組件之間怎麼傳值。

先說一下父組件引入子組件的方法。

一、路由配置：使用children屬性實現路由嵌套，嵌套的組件關係就是父子組件關係

 { path: '/father', name: 'father', component: father, children: [ { path: 'son', name: 'son', component: son } ] 
}

二、組件傳值-父組件向子組件傳值

第一步：父組件 在引用子組件時，經過屬性綁定（v-bind：）的形式，把須要傳遞給子組件的數據，傳遞到子組件內部，供子組件使用 

父組件：father.vue

<template>
  <div>
    <h1>父組件</h1>
    <router-view v-bind:fData="data1" :fMessage="data2"></router-view>
  </div>
</template>
 
<script> export default { data () { return { data1: '父組件數據data1', data2: '父組件數據data2', }; } } </script>

第二步：把父組件傳遞過來的數據， 在 props數組 中定義一下

1. 組件中的 全部props 中的數據，都是經過父組件傳遞給子組件的

2.  props 中的數據都是隻讀的，沒法從新賦值

第三步：在該子組件中使用props數組 中定義好的數據

子組件：son.vue

<template>
  <div>
    <h1>子組件</h1>
    <p>下面是父組件傳過來的數據</p>
    <p>第一個數據：{{fData}}</p>
    <p>第二個數據：{{fMessage}}</p>
  </div>
</template>
 
<script>
export default {
  props: ['fData', 'fMessage'],
  data () {
    return {
 
    };
  }
}
</script>

三、組件傳值-父組件把方法傳遞給子組件

第一步：父組件向子組件傳遞方法，使用事件綁定機制 v-on，自定義一個事件屬性，傳遞給子組件

父組件：father.vue

<template>
  <div>
    <h1>父組件</h1>
    <router-view @show="showFather"></router-view>
  </div>
</template>
 
<script> export default { data () { return { }; }, methods: { showFather (a, b) { console.log('觸發了父組件的方法' + '======' + a + '======' + b); } } } </script>

第二步：在子組件中定義一個方法，在方法中，利用  $emit  觸發 父組件傳遞過來的，掛載在當前實例上的事件，還能夠傳遞參數

第三步：在子組件中調用定義的那個方法，就能夠觸發父組件傳遞過來的方法了

子組件：son.vue

<template>
  <div>
    <h1>子組件</h1>
    <Button type="primary" @click="sonClick">觸發父組件方法</Button>
  </div>
</template>
 
<script> export default { data () { return { }; }, methods: { sonClick () { this.$emit('show', 111, 222); } } } </script>

四、組件傳值-子組件經過事件調用向父組件傳值

在子組件中，利用  $emit  觸發 父組件傳遞過來的方法的時候，能夠將子組件的數據當作參數傳遞給父組件

父組件：father.vue

<template>
  <div>
    <h1>父組件</h1>
    <router-view @show="showFather"></router-view>
  </div>
</template>
 
<script> export default { data () { return { fromSon1: '', fromSon2: '' }; }, methods: { showFather (a, b) { this.fromSon1 = a; this.fromSon2 = b; console.log('觸發了父組件的方法' + '======' + a + '======' + b); } } } </script>

子組件：son.vue

<template>
  <div>
    <h1>子組件</h1>
    <Button type="primary" @click="sonClick">觸發父組件方法</Button>
  </div>
</template>
 
<script> export default { props: ['fData', 'fMessage'], data () { return { sonMessage: '子組件數據sonMessage', sonData: '子組件數據sonData' }; }, methods: { sonClick () { this.$emit('show', this.sonMessage, this.sonData); } } } </script>

五、父子組件之間相互傳值

父組件：father.vue

<template>
  <div>
    <h1>父組件</h1>
    <Button type="primary" @click="getData">獲取數據</Button>
    <router-view v-bind:fData="data1" :fMessage="data2" @show="showFather"></router-view>
  </div>
</template>
 
<script> export default { data () { return { data1: '父組件數據data1', data2: '父組件數據data2', fromSon1: '', fromSon2: '' }; }, methods: { showFather (a, b) { this.fromSon1 = a; this.fromSon2 = b; console.log('觸發了父組件的方法' + '======' + a + '======' + b); }, getData () { console.log(this.fromSon1); console.log(this.fromSon2); } } } </script>

子組件：son.vue

<template>
  <div>
    <h1>子組件</h1>
    <p>下面是父組件傳過來的數據</p>
    <p>第一個數據：{{fData}}</p>
    <p>第二個數據：{{fMessage}}</p>
    <Button type="primary" @click="sonClick">觸發父組件方法</Button>
  </div>
</template>
 
<script> export default { props: ['fData', 'fMessage'], data () { return { sonMessage: '子組件數據sonMessage', sonData: '子組件數據sonData' }; }, methods: { sonClick () { this.$emit('show', this.sonMessage, this.sonData); } } } </script>