Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解

Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解_第1张图片

目录

前言

父组件传子组件 ---- props

给要传递数据的子组件绑定要传过去的属性及属性值

在子组件中使用props配置项接收

props配置项

子组件传父组件 ---- 组件的自定义事件

子组件向父组件传递数据

通过代码来绑定自定义事件


前言

本文将介绍在Vue中父子组件如何进行通信

父组件传子组件 ---- props

这里先介绍父组件如何向子组件传递数据

首先创建脚手架Cli

创建父组件App.vue和子组件SonX.vue

注册好子组件并在父组件中使用

子组件

导出子组件

Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解_第2张图片





父组件

导入子组件并注册使用

Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解_第3张图片





给要传递数据的子组件绑定要传过去的属性及属性值

Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解_第4张图片

仅在子组件上添加属性

在子组件中使用props配置项接收

Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解_第5张图片





效果

成功渲染到页面上

Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解_第6张图片

props配置项

注意:不要直接修改props中的数据

简单接收,直接采用数组形式接收:

props:['name','age','gender']

添加类型限制:

props:{

        name:String,

        age:Number,

        gender:String

}

当添加了类型限制后,如果父组件传过去属性值不符合就会报错

如下,父组件传过去的age='20'是字符串,并不是数字,所以就报错了

Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解_第7张图片

添加类型限制,并且还可以添加默认值,还可以添加必要性:

props:{

        name:{

                type:String,

                required:true

                        },

        age:{

                type:Number,

                default:20

                        },

        gender:{

                type:String,

                required:true

                        }

}

添加了默认值和必要性,当添加必要性时,如果没有传递就会报错,添加了默认值,如果没有传递该属性,子组件就会使用默认值

子组件传父组件 ---- 组件的自定义事件

在父组件中

先在子组件上自定义一个事件

v-on:事件名='函数' 或 @事件名="函数"

Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解_第8张图片





在子组件中

Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解_第9张图片

用以下方法进行对自定义事件的执行

this.$emit('自定义的事件名')



Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解_第10张图片

子组件向父组件传递数据

子组件中

this.$emit('自定义的事件名',传递的参数)

Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解_第11张图片



父组件中

对子组件中传过来的数据进行接收

Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解_第12张图片



成功接收并打印出来

Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解_第13张图片

通过代码来绑定自定义事件

先通过ref获取子组件

ref='组件名'

在mounted钩子函数中

this.$refs.ref获取到的组件名.$on('自定义事件名',回调函数)

Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解_第14张图片



在页面上渲染

Web前端 ---- 【Vue】(组件)父子组件之间的通信一文带你了解_第15张图片

你可能感兴趣的:(vue,vue.js,前端,javascript)