一、基础实现

在编写vue组件的时候，需要先了解两个比较基础的点。一，defineProps,二，defineEmits,这两个方法。

defineProps

在自组件中，我们会通过defineProps方法生成一个props对象，在props对象中，我们会定义好在父组件传递过来的变量 例如

//第一步先从vue中引入这两个方法
import { defineProps,defineEmits } from 'vue';
//第二步创建porps对象
const props = defineProps({
  name:{
    type:String,
    required:true
  },
  ...
  
})
//这里的name和父组件绑定的值对应

defineEmits

当我们需要向组件触发一个事件的时候，就需要用到这个方法，

const emits = defineEmits(['event'])
emits('event',数据1,数据2,...)

在项目中的完整写法

父组件

第一步：将封装好的子组件引入父组件

第二步：在父组件页面上使用子组件

第三步：给子组件绑定其需要的值

第四步：定义触发事件执行的方法

子组件

第一步：将defineProps,defineEmits从vue中引入子组件

第二步：创建props,并定义需要接受的数据，注意，这里的数据不能进行直接修改，需要保护单向数据流

第三步：创建emits,并定义触发的事件名，当emits一个事件给父组件的时候，参数可以为任意个，包括0个

二、进阶封装

在聊这个问题之前我们需要明白我们是为了什么而去封装组件，第一点，肯定是因为这个效果、页面重复出现，这个时候我们将其封装成一个组件，是不是既能够少写重复的代码，还能提高整个代码通用性，减少重复冗余的代码。经过上面部分的学习，我们只是能够封装出组件，但是这个组件的功能强不强大，通用性高不高，还不能得到保证

注意：

1.子组件不能直接修改父组件传递过来的数据，即Props,如果项目中需要修改，将其拷贝一份，修改拷贝的数据，（点击学习拷贝知识）

2.为了提高组件的通用性，我们通常会留一个slot插槽，这样可以解决某一些特殊的部分