2021-10-22 vue组件知识

最新推荐文章于 2024-11-08 23:19:07 发布

101lucky

最新推荐文章于 2024-11-08 23:19:07 发布

阅读量118

点赞数

分类专栏： vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_42947848/article/details/120898756

版权

vue 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

本文深入探讨Vue组件的全局与局部注册，介绍如何使用Vue DevTools进行组件调试，详细讲解组件间数据交互的三种方式，包括父组件向子组件、子组件向父组件及兄弟组件间的数据传递。此外，还详细阐述了组件插槽的使用，包括具名插槽和作用域插槽，帮助开发者更好地理解Vue组件的灵活性。

摘要由CSDN通过智能技术生成

如何基于vue进行组件化开发？
最基本的操作就是组件的处理，组件首先要注册（定义），然后才能使用
组件复用：每个组件是一个独立的实例，他们之间的数据是相互独立的

全局组件注册

vue实例本身就是一个组件，所有vue模板的内容都要放到el指定的容器中（根容器）
父子组件：现在注册的是子组件，他要放到最外层容器里，最外层容器也是组件，他们之间就形成了父子关系。
在这里插入图片描述

data的值是个函数：本质上来说，使用函数会形成一个闭包环境，这样保证每个组件都有一个独立的作用域
在这里插入图片描述

全局组件不仅可以用于其他组件还可以用于根组件

在这里插入图片描述

局部组件注册

在这里插入图片描述

组件名称（推荐用短横线的方式）：组件内容
组件内容抽取到一个对象中

局部组件只能被他的

vue调试工具

组件最终会被渲染成原生的dom
1.展示组件之间的层次关系
2.调试组件中的数据

组件间数据交互

组件之间的关系：父子组件、兄弟组件

组件之间的数据交互：
1.父组件向子组件传递数据
2.子组件向父组件传递数据
3.兄弟组件之间传递数据

vue实例本身是一个组件，并且是个根组件，在此基础之上重新定义一个子组件
定义子组件：
组件名称（短横线），组件内容
组件内容是个对象，里面包括组件的相关属性。
data属性是个函数，返回值是个对象，里面是子组件的数据
template属性是个字符串，把子组件的内容呈现出来
使用子组件：
在根组件中直接使用组件名称，用标签包起来

1.父组件向子组件传递数据

子组件可以使用父组件传递过来的数据

子组件怎么接收：子组件注册时，组件内容添加一个props属性，用来接收父组件传递过来的数据。值是个数组，数组里面可以有多个父组件的属性。

父组件怎么把数据传递过来：以属性的方式传递过来，父组件使用子组件时，给子组件绑定一个属性，属性名要和props中传递过来的属性名一样，属性值可以直接写也可以或者在父组件的data中动态绑定
在这里插入图片描述

通过v-bind（即：）绑定就会在子组件中获取到对应类型的数据，否则就是字符串

2.子组件向父组件传递数据

不能通过props直接操作父组件的数据，因为他是单向数据流

情况一：

给子组件添加一个按钮，显式调用一个特定的方法$emit，当点击的时候会触发$emit，方法名固定，这个方法会携带一个参数，参数名称就是自定义事件，名字是自己定义的，这个事件会传递给父组件。

父组件需要监听这个事件v-on:事件名(即@事件名)，事件名要和$emit()括弧里的一样，写在父组件模板区域的都属于父组件

在这里插入图片描述

情况二：

需要传值，子组件用$emit方法传递，父组件用$event接收

在这里插入图片描述

3.兄弟组件之间传递数据

兄弟组件之间不可以直接交互，必须通过事件中心进行通信

在这里插入图片描述

首先定义两个子组件，组件名称，组件内容（包括data,template,methods）下面要做的就是对事件中心事件的监听和事件的触发

1.定义一个全局的hub，在hub中可以进行事件监听
在这里插入图片描述
2.组件内部何时监听事件
mounted(){}钩子函数，一旦被触发，模板template已经就绪了，可以对模板进行相关的操作了，在这里监听事件
起一个事件名称，事件触发之后做什么使用箭头函数，这个函数会接收对方传过来的数据