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>