Vue-cli中的組件（傳參）

　　vue-cli中組件之間的參數傳遞，只能是父組件向子組件傳參。

　　1、父組件app.vue的修改

　　在父組件中的data中返回參數；在調用子組件時，進行數據綁定。

<template>
  <div id="app">
　　// 變紅的'msgJsonAPP是用來和子組件傳遞的名稱，需要與子組件接收名一致
    <HeaderVue :msgJsonApp="msgJson"></HeaderVue>
  </div>
</template>

<script>

import HeaderVue from "./components/header";
export default {
  name: "App",
  components: {
    HeaderVue
  },
  data(){
    return {
      msgJson:{msg: "頭部傳參",msgFlog: true}
    }
  }
};
</script>

<style>

</style>

　　2、子組件接收參數並使用

　　子組件中添加`props`參數用來接收父組件傳遞參數

<template>
  <div>
    這是頭部組件
    <p v-if="msgJsonApp.msgFlog">{{msgJsonApp.msg}}</p>
  </div>
</template>
<script>
export default {
// 此處msgJsonApp需要與父組件的一致
  props: ["msgJsonApp"],
};
</script>
<style scoped>
p {
  background-color: red;
}
</style>