通过 Prop 实现父子组件数据传递

父子组件之间传递数据，我们先讲一种最简单最常用的 Prop声明方式；

我们搞个 App父组件，然后 Menu作为子组件，App父组件向Menu子组件传值；

我们在父组件App里向Menu子组件传递菜单对象数组menus以及网站信息webSite对象；

<template>

  <div>

    <!--使用组件 传值-->

    <Menu :menus="menus" :webSite="webSite"></Menu>

  </div>

</template>

<script>

  import Menu from './components/Menu'  // 引入组件

  export default {

    name: 'App',

    components:{

      Menu  // 映射组件标签

    },

    data(){

      return {

        menus:[

          {

            id:1,

            name:'科技'

          },

          {

            id:2,

            name:'文化'

          },

          {

            id:3,

            name:'政治'

          },

          {

            id:4,

            name:'娱乐'

          }

        ],

        webSite:{

          url:'http://www.java1234.com',

          title:'Java知识分享网'

        }

      }

    }

  }

</script>

<style scoped>

</style>

下面是Menu.vue

<template>

    <div>

      <a :href="webSite.url" target="_blank" :title="webSite.title">

        <img src="../assets/logo.jpg" height="74" width="216" />

      </a>

      <ul>

        <li v-for="(menu,index) in menus" :key="menu.id">

          <a :href="'http://localhost:8080/menu/'+menu.id">{{menu.name}}</a>

        </li>

      </ul>

    </div>

</template>

<script>

  export default {

    name: 'Content',

    // 声明接收属性：这个属性就会成为组件对象的属性

    props:['menus','webSite']

  }

</script>

<style scoped>

  ul li{

    float:left;

    padding-left: 5px;

    list-style-type: none;

  }

</style>

运行效果：