vue 使用props 實現父組件向子組件傳數據

 

剛自學vue不久遇到很多問題，剛好用到的分組件，所以就用到傳遞數據

弄了好久終於搞定了,不多說直接上代碼

 

 

父組件：

<template>
    <headers  :inputName="name"></headers>     <!--調用子組件-->
</template>

<script>
    import headers from './Head.vue'
    export default {
            data() {
                return {
                    name: []
                }
            },
            components: {
                headers: headers
            },
            created:function(){
                //獲取商品分類
                this.$axios.get('http://localhost:9999/type').then(res => {
                    this.name=res.data;  //給數組賦值
                });
            }
    }
</script>

 

子組件：注意要 props來接收

<template>

</template>

<script>
    export default {
            props: ['inputName'],  //注意這里要父組件的名字一致
            watch: {
                inputName: function(newValue) {
                    console.log(newValue);  //可以看到數據已經拿到
                }
            }
    }
</script>

 

截圖：