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>