vue父组件向子组件传值

通过 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.huangbaokang.com',
                    title:'huangbaokang'
                }
            }
        }
    }
</script>

<style scoped>
</style>

           

<template>
  <div>
    <a :href="webSite.url" :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>