vue -封装一个弹出层组件（组件之间的通信）

---

前言

哈喽今天再回顾一下vue的组件功能，谈到组件无非就是父组件和子组件之间的传值问题了，我们一起探讨一下吧

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、Vue组件

vue组件官网

首先组件是可复用的实例，当我们封装好了一个组件后在父组件引入就可以使用了。
所以他们与new Vue 接受相同的选项，例如 data、computed、watch、methods、以及生命周期钩子等。

你可以将组件任意次的使用：

注意：

1. 当你点击按钮时，每个组件都会独立的维护他的count。因为你，每用一次组件，就会有一个他的新的实例被创建。
2. data 必须是一个函数？他为什么是一个函数呢？首先vue组件是用来复用的，且组件之间是引用关系，如果组件中的data不是一个
   函数的话，那么他的子组件的实例就不是一个独立的拷贝，而且他们之间的传值也会受到一定的影响。

二、项目实战

页面中点击按钮弹出新增的组件，双击数据在右边显示，点击保存新增一条数据，数据不能重复。

1.引入组件

代码如下（示例）：

组件之间引入页面中调用就可以使用了，难点在下边我们接着看

export default {
   
	components: {
   
	project:() => import ("@/components/project.vue")
}
}

2.读入数据

代码如下（示例）：
点击新增时先