父元件 Parent.vue

// Parent.vue
import child from './child'

export default {
  components: {
    child
  }
}

子元件 child.vue

// child.vue
export default {
  props: {
    msg: String
  }
}

1. 現在父元件Parent.vue要傳資料到子元件的msg屬性，可以這樣

<!-- Parent.vue -->
<template>
  <child :msg='msg from parent'>
  </child>
</template>
 

2. 現在子元件要傳資料給父元件

（1）事件冒泡（不推薦）

    子元件中this.$emit('name', callback)，然後父元件監聽就可以

（2）使用作用域插槽slot-scope

<!-- child.vue -->
<template>
  <div>
    <slot :msg="msg"></slot>
  </div>
</template>

<!-- Parent.vue -->
<template>
  <child>
    <template slot-scope="child">
      <p>{{child.msg}}</p>
    </template>
  </child>
</template>