6——VUE组件，子父组件传值，vue3中使用mitt传值

1、什么是组件

vue 是一个支持组件化开发的前端框架｡

vue 中规定:组件的后缀名是 .vue｡之前接触到的 App.vue 文件本质上就是一个 vue 的组件

组件化开发指的是:根据封装的思想,把页面上可重用的 UI 结构封装为组件,从而方便项目的开发和维护｡

在组件开发中,我们尽可能将页面拆分成一个个小的,可复用的组件,使代码更加方便管理,扩展性能加强,可复用､可维护达到高效开发｡

2、组件的好处:

每个组件都是自定义标签､

复用性强､

分工开发､

方便维护､

方便拆分､

耦合度低､

有完整的生命周期

3、使用组件

① (不搭脚手架)组件开发

三步曲:声明､注册､使用

组件的使用事项:

1.组件必须要有一个根元素

2.当组件在使用中,标签中不需要嵌套东西可以使用单标签

3.在组件复用的时候,就使用双标签

重点：data为什么必须是函数不可以是对象？

组件中data如果是对象，那么多次使用组件时我们公用的是一个data数据，改一个其他都改变，不利于实际开发。data是一个函数意味着组件拥有自己私有的数据他们各自维护自己私有的数据即可。

② (搭脚手架)组件开发

使用组件三部曲:声明､注册､使用

4、组件间数据共享

1、组件间的关系

在项目开发中，组件之间的最常见的关系分为如下两种：

① 父子关系

② 兄弟关系

2、父子组件之间的数据共享

父子组件之间的数据共享又分为：

① 父 -> 子共享数据

通过属性传递

子要声明props:['属性名'] 来接收父级数据

props中可以设置参数 限制类型 限制必填项 赋默认值

props:{msg:{type:String,required:true,default:"你好",},
}

注意

· props的数据时单向的，只能从父组件传到子组件

· props的数据不可更改，如果要更改需备份到data中做操作

② 子 -> 父共享数据

子组件向父组件共享数据使用自定义事件。

子组件里通过$emit('自定义事件名',变量1，变量2)触发

父组件@自定义事件名=‘事件名’监听

③ 兄弟组件之间的数据共享

• vue2中组件传值： EventBus

兄弟组件之间数据共享的方案是 EventBus

创建一个空实例（bus中央事件总线也可以叫中间组件） let Event=new Vue();

数据的发送 Event.$emit(‘接口’，数据)

数据的接收 Event.$on（‘接口’，function(v){}） v指发过来的数据

EventBus 的使用步骤

① 创建 eventBus.js 模块，并向外共享一个 Vue 的实例对象

② 在数据发送方，调用 bus.$emit('事件名称', 要发送的数据) 方法触发自定义事件

③ 在数据接收方，调用 bus.$on('事件名称', 事件处理函数) 方法注册一个自定义事件

• vue3中组件传值： mitt

面试题：vue组件中data为什么必须是一个函数？

当我们使用组件的时候，虽然data是在构造器的原型链上被创建的，但是实例化的函数对象确是共享同样的data对象,当你修改一个属性的时候，data也会发生改变当我们的data是一个函数的时候，每一个实例的data属性都是独立的，不会相互影响了因为JavaScript的特性所导致，在component中，data必须以函数的形式存在，不可以是对象。

组建中的data写成一个函数，数据以函数返回值的形式定义，这样每次复用组件的时候，都会返回一份新的data，相当于每个组件实例都有自己私有的数据空间，它们只负责各自维护的数据，不会造成混乱。而单纯的写成对象形式，就是所有的组件实例共用了一个data，这样改一个全都改了。