当前位置： 移动技术网 > IT编程>脚本编程>vue.js > Vue自定义组件和组件传值（父传子、子传父、子传子）

Vue自定义组件和组件传值（父传子、子传父、子传子）

2020年07月24日  | 移动技术网IT编程  | 我要评论

一、Vue自定义组件

1、在src中components中,新建Header.vue组件（首字母建议大写）
在这里插入图片描述

2、Header.vue

在这里插入图片描述

3、在app.vue中引用组件
第一步引入组件

在这里插入图片描述
第二步在export default注册组件

在这里插入图片描述
第三步使用组件

在这里插入图片描述
运行结果：

在这里插入图片描述

二、Vue组件组件传值：父传子、子传父、子传子

Vue常用的三种传值方式有：
父传子
子传父
非父子传值

1. 父组件向子组件进行传值
父组件：

在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

子组件：

在这里插入图片描述

运行结果：

在这里插入图片描述

2. 子组件向父组件传值
子组件：

在这里插入图片描述
在这里插入图片描述

父组件：

在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

运行结果：

在这里插入图片描述

3. 非父子组件进行传值

非父子组件之间传值，需要定义个公共的公共实例文件bus.js，作为中间仓库来传值，不然路由组件之间达不到传值的效果。

公共bus.js
在这里插入图片描述

组件A：
在这里插入图片描述
组件B：
在这里插入图片描述

本文地址：https://blog.csdn.net/Idvms/article/details/107533756

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网