Vue组件通信方式父传子、子传父组件传值

最新推荐文章于 2024-06-06 16:37:28 发布

阿代别让我伤心

最新推荐文章于 2024-06-06 16:37:28 发布

阅读量1.8k

点赞数 36

文章标签： vue.js 前端 javascript 笔记

本文链接：https://blog.youkuaiyun.com/m0_74351572/article/details/135071232

版权

node_moudles：npm 安装的支持项目运行的库

public文件夹：

index.html：Vue项目的入口文件，页面文件（首页）

src文件夹：

assets:资源目录，存放图片、css、js文件等

components：组件文件夹，用来存放用户自定义的组件

router：路由文件夹，用来存放路由文件

views：所要显示的内容

App.vue：根组件，可以包含其他组件

main.js：vue项目的入口js文件

babel.config.js：即为Babel的配置文件，作用于整个项目

jsconfig.json：可选的配置文件

package-lock.json：是在npm install执行的时候生成的一份文件，用来记录package.json的来源和版本号

package.json：npm的配置文件（所有包的信息）

vue.config.js：vue项目自身的配置文件

二、Vue自定义组件的创建

2-1 自定义组件

在components文件内添加文件CustomButton.vue的文件，注意后缀名，在新建的页面中使用标签template和div，div标签是根标签，只有一个，我们写的标签只能放在div中，放其他地方无效，创建一个button标签并添加相对于的样式。

在你所要显示的页面中调用组件，首先在scipt标签内先引用组件文件，路径一定要写对，在components中注册组件，引用和注册组件名字最好和组件的名字同名，然后在页面使用组件。

在集端运行代码npm run serve运行如图：

三、父组件向子组件通信

父组件的模板中包含子组件，父组件要向子组件传递数据或者参数，子组件在接收到父组件的数据或参数后，会根据数据或参数的不同进行对应的渲染。而这个过程是通过props来实现的。在上面案例中AboustView父组件，CustomButton是子组件。

在父组件AboutView中在自定义控件里面定义一个text的字段传入内容：

在子组件CustomButton中的scriptb标签中添加props的内容，接收父组件AboutView传进来的值并保存，在需要显示的页面上以{{}}的形式进行渲染：

运行如下：

四、子组件向父组件通信

父组件向子组件传值通过props实现，反过来子组件向父组件传值需要通过$emit()方法向父组件暴露一个事件，然后父组件在处理这个事件的方法中获取子组件传过来的数据。

主要步骤：

① 在子组件中通过$emit向父组件暴露一个事件。

② 在父组件中处理子组件暴露出来的事件，并接收子组件传过来的值。

在子组件CustomButton中创建一个按键，当点击按钮时从子组件CustomButton传值给父组件AboutView。定义一个点击事进行数据的传递，并在methods中用$emit方法进行数据的传值，格式为：$emit("自定义字段名称","传过去的数据值")：

在父组件AboutView中以@来获取子组件CustomButton的值，格式为：@子组件传值时的自定义名称="定义一个保存子组件的字段"，然后在methods中获取receive的数据，赋值给msg中，在渲染给页面：

在页面点击按钮时就会传值：

五、总结

首先父传子可以使代码不会显得臃肿和混乱,能让自己或者别更好的阅读自己的代码能,在实际工作中这种父传子或者子传父的应用可以大幅度降低代码换人修改后阅读和理解代码的难度使得在工作中交接代码更加便捷和快速,即使出了bug也能很快找到对应的文件进行修改,使得工作更加高效。

我们需要通过父组件像子组件传递数据或者为了防止每个子组件都会有请求数据事件的发生，从而导致代码冗余，所以，我们可以把同一个模块下的所有子组件请求事件都放到父组件中去处理。