Vue父子组件之间传值

1、父组件向子组件传值

第一步：父组件 在引用子组件时，通过属性绑定（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数组 中定义一下

组件中的 所有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>

2、父组件把方法传递给子组件

第一步：父组件向子组件传递方法，使用事件绑定机制 v-on，自定义一个事件属性，传递给子组件

<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>

3、子组件通过事件调用向父组件传值 （同2）
子组件通过事件调用向父组件传值
在子组件中，利用 $emit 触发 父组件传递过来的方法的时候，可以将子组件的数据当做参数传递给父组件