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>

 

posted @ 2020-02-26 21:18  xsan  阅读(421)  评论(0编辑  收藏