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>