Vue.js 組件數據傳遞 Pass Data To Another Component

在Vue的世界裡

我們如何把數據從組件A傳到組件B的

方法很簡單，如下

假設我有一個自訂義的組件 Header.vue, 我想在 App.vue 裡把數據 foodList傳給它

首先在 Header.vue 組件上, 我們使用必須開一個接口 foodList 去接收數據,

新增props屬性foodList

<script>

     export default{

          props:{

               foodList:{

                    type: Array,

                    default: () => []

               }

          }

     }

</script>

接下來,

當我們在App.vue裡使用時Header.vue組件時

就可以順勢地把資料船過去

App.vue

<template>

     <MyHeader :foodList='foodList'> </MyHeader>

</template>

<script>

     import MyHeader from './component/Header.vue'

     export default {

          name: 'app',

          data(){

               return {

                    foodList:

                    [ 

                     {

                        name: "rice",

                        price: 50

                     },

                     {

                        name: "noodle",

                        price: 55

                     },

                     {

                        name: "bread"

                        price: 30

                     }

                    ]

               }

          }     

          component: {

               MyHeader

          }

     }

</script>

如此一來

Header.vue就可以直接使用這些數據了

<template>

  <div class='header'>

     {{foodList[0].name }}

  </div>      

</template>