不同的人之間是需要溝通，作為元件間的溝通也是很重要的，現在就來好好溝通吧！
大家好，今天是鐵人賽的第九天就讓我們來好好溝通一下吧！

在Vue的世界裡每個元件都是獨立的，即便是子元件直接修改父元件，乃至另一個元件都是不能也不應該的。
但是當我們需要切分元件重複利用這個元件，可以根據外部傳入的資料反映出不同結果，所以不能直接取用的話，那不同層元件間，若要引入資料就要透過props引用外部狀態。

使用方式用v-bind如下：

const app = Vue.createApp({
    data(){
        return{
            text:'這是外層的元件'
        }
    }
});
app.component('example-component', {
    template: `
        <div class="component">
            <div> 從 props 來的 parentText ==> {{ parentText }} </div>
            <div> 自己的 text ==> {{ text }} </div>
        </div>`,
        props: ["parentText"],
        data(){
            return{
                text:'子元件'
            }
        }
});
app.mount('#app');

在內層元件透過props宣告從外部引用進來的屬性名稱，並在外層模板使用內層元件標籤時，以v-bind將資料傳遞進來，特別注意的是props與子元件命名的情況一樣，若我們是以HTML作為模板的時候，因HTML不分大小寫，像 parentText的駝峰式寫法，在模板裡要轉換成連字號parent-text。

在子元件宣告props，最簡單的方式就是透過陣列型態，這樣就可以透過HTML標籤內的屬性將外層的狀態引入至對應的 props

app.component('example-component', {
    props: ['props1', 'props2', 'props3', ...],
});
//引入後的樣子
<example-component
    :props1="..."
    :props2="..."
    :props3="...">
</my-component>

• props資料類型的驗證

Vue內建能夠檢查的屬性：string、number、boolean、array、object、date、function、symbol。
以上為今天的文章內容，感謝各位的收看。
我們明天見囉～