Vue父子组件传值的三种方法

更新时间：2022年12月20日 15:47:11 作者：Miracle sir

这篇文章主要介绍了Vue父子组件传值的三种方法，本文结合示例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

前言

例如：Vue的学习是路阻且艰的，这是一个系列文章，帮助vue的新手可以快速上路，创建的自己的项目，该系列文章主要讲解作者在vue学习之路上，创建项目中最重要的知识，因为笔者水平有限，希望大家多多指正，该系列文章旨在让大家感受vue的便捷，详细学习vue希望大家多多观看官方文档.

一、Vue父子传值的方法

我们在Vue项目进行父子传值主要有以下三种方法：
(1) props / $emit
(2) $parent / children
(3) $ref
在观看方法详解时大家先创建一个父组件parent.vue和一个子组件child.vue并完成父子组件的注册

二、方法详解

1.props / $emit

⼦组件中通过定义props接收⽗组件中通过v-bind绑定的数据

父传子

首先在父组件中定义一个示例data

import child from './child.vue' 
    export default {
        name:'parent',
        components:{
            child
        },
        data(){
            return{
                parentdata:"This is the first word from parent"
            }
        }
    }

在父组件中使用子组件时用v-bind定义一个属性并将父组件的parentdata传入

<child :parentdata="parentdata"></child>

在子组件中使用props接收传入的属性，并可以直接使用

<template>
    <div>
        {{parentdata}}
    </div>
</template>

<script>
    export default {
        name:"child",
        props:{
            parentdata:{
                type:String,
                default:""
            }
        }
    }
</script>

观看结果：

父组件传入子组件的值就被显示出来了

子传父

首先在子组件中定义一个事件，并且使用emit发送给父组件，在示例中子组件使用的click事件触发发送自定义事件(sendmsg)

<template>
    <div>
        <button @click="childmsg">点我试试</button>
    </div>
</template>

<script>
    export default {
        name:"child",
        data(){
            return{
                msg:"This is the first word from child"
            }
        },
        methods:{
            childmsg(){
                this.$emit('sendmsg',this.msg)
            }
        }
    }
</script>

emit使用方法
this.$emit(‘自定义事件名’,所需要传的值)

在父组件中需要定义方法(getmsg)接受自定义事件(sendmsg)：

<template>
    <div>
        <child :parentdata="parentdata" @sendmsg="getmsg"></child>
    </div>
</template>

<script>
    import child from './child.vue' 
    export default {
        name:'parent',
        components:{
            child
        },
        methods:{
            getmsg(val){
                console.log(val)
            }
        }
    }
</script>

在定义方法时直接在函数中设置形参接受子组件传入的值（getmsg(val)）
在控制台就可以看见打印结果This is the first word from child

2.$parent / children

在使用这个方法时，大家可以先在父组件中打印出来$children,帮助大家理解
代码如下

mounted(){
            console.log(this.$children)
        }

可以看到，子组件被打印出来了

只要找到组件对象对应的属性，就可使用

mounted(){
            alert(this.$children[0].msg)
        }

可以看到结果

注意，这种方法不仅可以调用数据，也可以使用子组件的方法！（但不可以直接调用，这个接下来的文章再说）

如果是子组件使用父组件的数据，可以同样的流程

3.$ref

ref可以让父组件更加便利地取到想要的子组件，其中原理和第二种方法相同，都是取到组件对象

在父组件中定义ref

<template>
    <div>
        <child ref="childselected"></child>
    </div>
</template>

在父组件中取值：

mounted(){
            alert(this.$refs.childselected.msg)
        }

可以看到相同的结果：

总结

***本篇主要讲解了Vue项目中父子组件传值的三种方法：
props/$emit
子组件通过v-bind接收父组件的值
父组件通过接收emit发送的事件接收子组件的值
$parent/children
直接获取组件对象来取值
$ref
定义属性名获取组件对象值

到此这篇关于Vue父子组件传值的文章就介绍到这了,更多相关Vue父子组件传值内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue-draggable实现pc端拖拽效果
这篇文章主要为大家详细介绍了vue-draggable实现pc端拖拽效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-04-04
vue2+springsecurity权限系统的实现
本文主要介绍了vue2+springsecurity权限系统的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2023-05-05
axios拦截器工作方式及原理源码解析
这篇文章主要为大家介绍了axios拦截器工作原理源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-02-02
详解vue.js的devtools安装
本篇文章主要介绍了详解vue.js的devtools安装，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-05-05
Vue收集依赖与触发依赖源码刨析
vue对依赖的管理使用的是发布订阅者模式，其中watcher扮演订阅者，Dep扮演发布者。所以dep中会有多个watcher，一个订阅者也可以有多个发布者(依赖)。总共三个过程：定义依赖、收集依赖、触发依赖。下面开始详细讲解三个过程
2022-10-10
如何在Vue中使用protobuf
这篇文章主要介绍了如何在Vue中使用protobuf，protobuf是由google推出的和语言无关和平台无关，几乎支持当前的大部分语言，如JavaScript,下文更多相关介绍需要的小伙伴可以参考一下
2022-03-03
vue3.0 搭建项目总结(详细步骤)
这篇文章主要介绍了vue3.0 搭建项目总结(详细步骤),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-05-05
vue项目中在可编辑div光标位置插入内容的实现代码
这篇文章主要介绍了vue项目中在可编辑div光标位置插入内容的实现代码，代码简单易懂，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下
2020-01-01
Vite+TS+Vue开启eslint和prettier规范及校验方式
这篇文章主要介绍了Vite+TS+Vue开启eslint和prettier规范及校验方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-06-06
探究Vue.js 2.0新增的虚拟DOM
vue.js 2.0大家对此并不陌生吧。最令人兴奋的是更新页面的"虚拟DOM"的加入。那么对于虚拟 DOM 可以做什么呢？今天小编通过本文给大家解答下
2016-10-10