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>