Vue子組件接收父組件傳值的方式有哪些

這篇文章給大家分享的是有關Vue子組件接收父組件傳值的方式有哪些的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

父組件代碼↓

<template>
    <div>
        <div>父組件</div>
        <Student :name="name" :age="age"></Student>
    </div>
</template>

<script>
    // 引入組件
    import Student from './components/Student'
    
    export default {
        name: 'App',
        components: {Student,},
        data() {
            return {
                name: "張三",
                age: 18
            }
        }
        
    }
    
</script>

1.簡單聲明接收

<template>
    <div>
        <div>子組件</div>
        <h3>學生姓名：{{ name }}</h3>
        <h3>年齡：{{ age }}</h3>
    </div>
</template>

<script>
    export default {
        name: 'Student',
        data() {
            return {}
        },
        
        // 簡單聲明接收 ----------
        props: ['name', 'age']
        // ---------------------
        
    }
</script>

2.接收數據的同時進行 類型限制

<template>
    <div>
        <div>子組件</div>
        <h3>學生姓名：{{ name }}</h3>
        <h3>年齡：{{ age }}</h3>
    </div>
</template>

<script>
    export default {
        name: 'Student',
        data() {
            return {}
        },
        
        // 接收數據的同時進行類型限制 ---
        props: {
            name: String,
            age: Number
        }
        // --------------------------
        
    }
</script>

3.接收數據的同時對 數據類型、必要性、默認值 進行限制

<template>
    <div>
        <div>子組件</div>
        <h3>學生姓名：{{ name }}</h3>
        <h3>年齡：{{ age }}</h3>
    </div>
</template>

<script>
    export default {
        name: 'Student',
        data() {
            return {}
        },
        // 接收數據的同時對 數據類型、必要性、默認值 進行限制 -----
        props: {
            name: {
                type: String,      // name傳入類型必須為字符串
                required: true    // name設為必傳字段
            },
            age: {
                type: Number,
                default: 233      // 默認值
            }
        },
        // ------------------------------------------------
    }
</script>

感謝各位的閱讀！關于“Vue子組件接收父組件傳值的方式有哪些”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！