三分钟让你了解 vue 中的父子通讯

CRMEB

已于 2022-05-23 14:31:00 修改

阅读量890

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习笔记 CRMEB 文章标签： vue.js 前端 javascript

于 2022-05-23 14:30:27 首次发布

原文链接：https://juejin.cn/post/7100175332770054151

学习笔记同时被 2 个专栏收录

404 篇文章

订阅专栏

CRMEB

396 篇文章

订阅专栏

本文详细阐述了Vue组件化开发的概念，包括组件封装、复用和维护优势，以及父子组件间的通信方法。通过实例演示如何创建、使用组件，解决样式冲突，并介绍了父传子与子传父的通信方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue 组件化开发.

什么是组件化开发.
组件时可以复用的 vue 实例，封装标签，样式和 JS 代码
vue 组件分类:

页面组件
页面下的功能组件
组件化开发: 一个页面 (.vue) 可能有一个或多个组件 (.vue) 组成完整的页面功能

封装的思想 , 把页面上可以重复使用的部分封装成为一个组件，从而方便项目的开发和维护
一个页面，可以拆分成一个个组件，一个个组件就是一个独立的整体，可以拥有自己的结构。样式和行为.

在这里插入图片描述

vue 组件的封装与使用.

为什么要封装组件
复用。封装一次可以多次使用
方便维护和代码的整理.
使用步骤.

先定义一个组件
先创建创建一个名为 MyCom 的组件，并在 App.vue 中使用 2. 在 App.vue 中注册组件

在这里插入图片描述

使用组件.

在这里插入图片描述

注意：组件的名字不能和现有的 html 标签名一致

在 vue 中存在多个组件样式名相同，从而产生出冲突的问题.
因为在 vue 中默认组件 style 中定义的样式是全局的，所以存在相同名字覆盖的情况，从而导致效果出不来产生冲突。我们怎么解决这个冲突呢.
局部样式：在 style 标签上加上 scoped 属性.

在这里插入图片描述

原理

在 style 上加入 scoped 属性，就会在此组件的标签上加上一个随机生成的 data-v 开头的属性
而且必须是当前组件的元素或子元素的根元素才会有这个自定义属性

在这里插入图片描述

如果在 style 上加上 scoped, 组件内的样旨在当前的 vue 组件生效，相反，样式就是全局的.
当然在父子组件都设置了 scoped 属性的情况下，父组件中怎么控制子组件中的样式，这个时候我们就需要用到.vue组件中的深度作用选择符. /deep/属性来解决这个问题

vue 组件通信.

怎样在组件之间做通讯？
因为每个组件的变量和值都是独立的 => 如果想要获取对方页面中定义的变量应该怎么做呢？
我们先来看一下他们之间的关系图.

父组件传子组件通讯

在这里插入图片描述

在 App.vue 中导入 MyCom.vue 并使用，这个时候我们称 App.vue 这个组件为父组件，MyCom.vue 组件是子组件.
那么我们要怎么导入并使用这个组件呢.
我们先创建一个文件夹，在里面创建一个 App.vue 组件和 MyCom.vue 组件.

1. 然后在父组件中将你需要传的值自定义一个属性

在这里插入图片描述

2. 在子组件用，用 props 接收这个自定义属性。我们就可以在子组件中使用父组件中的值了.

在这里插入图片描述

在 vue 中我们需要遵守单向数据流的原则.

在父传子的前提下，父组件的数据会发生通知子组件自动更新.
子组件内部，不能直接修改父组件传递过来的 props (props是只读的)

在这里插入图片描述

意思就是父组件中的数据传过去了之后，子组件只能使用父组件传过去的数据不能修改父组件中的数据，修改之后就会报错。我们把这中现象叫做，vue 中的单项数据流

说明: 父组件传给子组件的是一个对象，子组件修改对象的属性，是不会报错的，对象是引用类型, 互相更新；但不能改变引用地址
props 的值不能重新赋值。但是引用类型子组件可以修改父组件
子组件传父组件通讯
什么是子组件传父组件通讯。指的是从子组件内部把数据传出来给父组件使用或者修改父组件数据
关系图.

在这里插入图片描述