父子组件间传值、传递事件

一、父子组件间传值

1、父组件向子组件传值

父组件

<template>
  <div class="father">
    <child fatherMsg="click me"></child>
  </div>
</template>
<script>
import child from '@/components/child'
export default {
  components: {
    child
  },
  data () {
    return {}
  }
}
</script>

子组件

<template>
  <div class="child">
    <button >{
  {fatherMsg}}</button>
  </div>
</template>
<script>
export default {
  props: ['fatherMsg'],
  data () {
    return {}
  }
}
</script>

在父组件中，创建一个自定义属性fatherMsg，将值赋值给fatherMsg。
在子组件中，使用props来接收fatherMsg传递来的值。

2、子组件向父组件传值

父组件

<template>
  <div class="father"