简单易懂的 vue父子组件传值

最新推荐文章于 2025-11-13 12:19:08 发布

原创最新推荐文章于 2025-11-13 12:19:08 发布 · 369 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #组件传值

vue 专栏收录该内容

13 篇文章

订阅专栏

本文详细介绍了Vue中父子组件及兄弟组件之间的数据传递方法。包括父组件如何通过属性向子组件传递数据，子组件如何通过事件向父组件传递数据，以及使用EventBus实现兄弟组件间的通信。

vue父子组件传值

1.`父向子` 传递数据：

在父组件中把子组件当做标签引入，通过设置标签的属性传递数据，
在子组件用props接受，将父组件的数据number通过设置标签child的number属性传递给子组件，
子组件通过props传递接受，接受后，在子组件内this.number就是父组件的number数据。

父组件代码如下(分步骤)：

<template>
    <div>
        <!-- 4.将子组件当做标签引入，并赋要传的值 -->
        <child :number="number"></child>
    </div>
</template>

<script>
    import child from '@/child'  //1.在父组件中引入子组件
    export default {
        data() {
            return {
                number:1   //3.定义要传的值
            }
        },
        comments:{
            child   //2.在父组件中注册子组件  （已在router > index.js 文件中注册过可忽略此步）
        },
    }
</script>

子组件代码如下(分步骤)：

<template>
    <div>
        {{number}} //使用
    </div>
</template>
<script>
    export default {
       props:{
         number:Number //接收props传递的number，后面写数据类型，传的什么类型就写什么，首字母大写
       }
    }
</script>

2.`子向父` 传递数据：

子向父传值需要父组件绑定一个事件，子组件通过$emit调用这个事件把值传过去
子组件代码如下：

<template>
    <div>
    	<!-- 1.调用一个方法 -->
        <div @click="toFather()">子向父传值</div> 
    </div>
</template>
<script>
    export default {
        methods: {
            toFather(){
                this.$emit('fromChild','123') //通过$emit调用父组件中定义绑定的方法
                //括号里('是父组件绑定的事件名','要传的')
            }
        },
    }
</script>

父组件代码如下(分步骤)：

<template>
    <div>
        <!-- 1.给子组件标签绑定一个方法  触发这个方法后调用另一个处理传来的数据的方法 -->
        <child @fromChild="fatherFUN(val)"></child> 
    </div>
</template>
<script>
    import child from '@/child'
    export default {
        methods: {
            //2.处理传来的数据的方法
            fatherFUN(val){
                console.log(val)
            }
        },
        comments:{
            child
        },
    }
</script>