今天是第二十六天，我想分享一下prop。

prop 是一種attribute，你可以在組件上聲明註冊。

我們的組件需要聲明它所接受的prop這樣才可以知道傳入的哪些是prop。

可以使用prop來定義，下方是字符串數組形式列出的prop。

props: ['title', 'likes', 'author']

如果希望每個prop都有指定的值，也可以用對象形式列出prop，
這樣prop就擁有了各自的名稱和類型

props: {
        title: String,
        likes: Number,
        author: Object,        
      }

靜態或動態prop
靜態值形式的prop

<BlogPost title="My journey with Vue" />

我們可以使用前面介紹過的v-bind來進行動態值形式的prop

<BlogPost :title="post.title" />

• 單向數據流
  prop 都遵循著單向綁定原則，假設父組件傳遞資料子組件時，子組件會隨之更新，但是子組件無法逆向傳遞回父組件，這樣就避免了子組件無意間修改到父組件的情況發生。

所以當我們今天想要單向綁定數值時，可以使用prop，有效降低元件間互相干擾。

下面來個例子
這裡是HTML的部分，user-hungry為子組件，hungry為父組件

<div id="app">     
    <prompt-component :user-hungry="hungry"></prompt-component>                  
</div>

這裡是JS的部分

<script>
    const app=Vue.createApp({})
    app.component('prompt-component',{
        template:`
        <button @click="btnfuc">你餓了嗎??</button>
    `,
    props:['user-hungry'],
    methods:{
        btnfuc:function(hungry){
            alert("我餓了");
        }
    }
    })
    app.mount("#app");
</script>

執行結果

參考文件:
https://vuejs.org/guide/essentials/component-basics.html#passing-props
https://vuejs.org/guide/components/props.html

prop就分享到這邊，我們第二十七天見