vue組件之間通訊：父傳子

若是熟悉React你就會發現，vue與React的組件通訊是同樣的：父傳子、子傳父、非父子其原理是同樣的。

今天只講vue的父傳子：

子組件：

<template>
    <div>
        {{name}}
    </div>
</template>

<script>
    export default {
        props: ['name'],
        data(){
            return {
                
            }
        }
    }
</script>

<style>
</style>

父組件：

<template>
    <div>
       <num-data :name="numData"></num-data> //屬性name前面帶冒號':',傳的是data中的值
    </div>
</template>

<script>

    import numData from './numData.vue';
    export default {

        components: {
            'num-data': numData
        },
        data(){
            return {
                numData: '84k'
            }
        }
    }
</script>

<style>
</style>

 

子組件：

<template>
    <div>
        {{name}}
    </div>
</template>

<script>
    export default {
        props: ['name'],
        data(){
            return {
                
            }
        }
    }
</script>

<style>
</style>

父組件：

<template>
    <div>
       <num-data name="numData"></num-data> //屬性name前面不帶冒號':',傳的值是「numData」，寫什麼就傳什麼
    </div>
</template>

<script>

    import numData from './numData.vue';
    export default {

        components: {
            'num-data': numData
        },
        data(){
            return {


            }
        }
    }
</script>

<style>
</style>

 

總結---在vue當中，父組件向子組件傳值，其原理就：

(1)第一步，首先咱們要在父組件中肯定好要傳給子組件的值

(2)第二步，在父組件當中，在咱們引入的子組件上去自定義一個屬性，而後經過這個自定義的屬性把父組件上想要傳遞給子組件的值傳遞到這個屬性上

(3)最後在子組件上，咱們能夠經過props屬性來去接收這個自定義的屬性（此時這個自定義屬性已經攜帶着要傳遞的值了）