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

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

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

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

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

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

第一步：父組件 在引用子組件時，通過屬性綁定（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> 

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

第一步：父組件向子組件傳遞方法，使用事件綁定機制 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> 

4、組件傳值-子組件通過事件調用向父組件傳值

在子組件中，利用  $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> 

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

父組件：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>