最簡單的父子組件傳值

父組件傳值給子組件，父組件引入子組件然後註冊然後使用，使用的時候綁定一個值，這個值可以直接寫在冒號裏面或者寫在data裏面，然後子組件用props接收，用{{}}進行綁定

父組件

<template>
  <child :message="'msg'"></child>
</template>

<script>
import Child from './Child'
export default {
  components: {
    Child
  },
  data () {
    return {
      // msg: 'hello'
    }
  }
}
</script>

子組件

<template>
  <div>11{{message}}</div>
</template>

<script>
export default {
  props: {
    message: {
      type: String,
      required: true,
      default: ''
    }
  },
  data () {
    return {

    }
  }
}
</script>

文件存放位置

路由寫法

瀏覽器顯示結果：