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属性来去接收这个自定义的属性（此时这个自定义属性已经携带着要传递的值了）