vue组件之间通信：父传子

最新推荐文章于 2025-07-10 09:41:31 发布

weixin_33918114

最新推荐文章于 2025-07-10 09:41:31 发布

阅读量163

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/u/3946362/blog/2252579

本文详细解析Vue.js中父组件向子组件传递数据的方法，包括如何定义自定义属性及使用props接收。通过实例展示了正确的属性绑定方式，帮助开发者理解Vue组件间通信的基本原理。

2019独角兽企业重金招聘Python工程师标准>>>

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

转载于:https://my.oschina.net/u/3946362/blog/2252579