Vue props 隨筆

• Passing Static or Dynamic Props
• Prop Casing (camelCase vs kebab-case)

原本的 vuetify 範例是

  <v-sheet
    class="mx-auto bg-blue-600"
    elevation="0"
    max-width="1200"
  >

  </v-sheet>

現在想用動態的傳入 props 可以改用 :max-width

  <v-sheet
    class="mx-auto bg-blue-600"
    elevation="0"
    max-width="mw"
  >

  </v-sheet>

<script>
  export default {
    props: {
        mw: Number,
    },
</script>

然後就能從外部傳遞 props 進來了

<my-home-carousel pc mw="1200"></my-home-carousel>

其實之前已經寫過 passing dynamic data in Laravel blade 概念差不多
https://jntng.coderbridge.io/2020/10/26/laravel-passing-collection-anonymous-component/

今天踩了兩次 HTML 大小寫的坑
早上才因為 vue 命名用 CamelCase 導致 HTML 沒有 parse （我用了 my-homeCarousel）
下午又犯一樣的錯，在 HTML 我用了 maxWidth，這到 vue 會變成 maxwidth，所以我東西一值傳不進來
如果真的很想在 vue 裡用 CamelCase，HTML 應該寫成 max-width

真的有夠不熟 vue