Vue3中如何进行封装？—组件之间的传值

用了很久一段时间Vue3+Ts了，工作中对一些常用的组件也进行了一些封装，这里对封装的一些方法进行一些简单的总结。

1.props传递

首先在主组件进行定义传值

​

这里与vue2不同的是需要利用defineProps进行参数的接收，我这里用到了TS，所以也加入了类型声明。

2.监听参数变化

在一些业务中，父组件传给子组件的数据有时候是动态的，这个时候就需要对参数的改变进行识别了

这里就用到watch了

watch(
  props,
  (newVal) => {
    console.log(props,'props改变了');
  },
  {
    immediate: true,
  }
);

对props进行监听，如果进行改变，然后怎么进行操作，可以更细节的处理了。

这里watch的使用可以参考官网响应式 API：核心 | Vue.js

3.触发事件

子向父亲传递信息，或者使用父亲的方法应该怎么做呢，这是就是用到emits了

首先父组件对子组件绑定方法

​

绑定后需要在子组件进行接收

​

这里在子组件定义接收后，再触发时用emits（'方法名'，传递参数）的形式进行触发，而这个传递参数是你在父组件绑定方法中所定义的参数。

4.调用子组件方法

在封装中，也会遇到一些调用子组件的方法，我现在常用的是下面这种

先用defineExpose将方法进行暴露

const out=(val:string)=>{
    console.log('我是子组件的方法',val);
}
defineExpose({
    out,
});

然后在父组件使用ref绑定子组件，获取其方法

​

这里就是先用ref绑定，然后利用其调用方法，括号内的参数即在子组件定义参数。

5.插槽

插槽方法可以见我以前总结的内容，这里不再详细讲解

vue中的插槽详细介绍_and design vue树形控件插槽title要多个字段_时雨.`的博客-CSDN博客

6.总结

上述内容其实就是对常用的组件传值进行的一个总结，真实内容封装其实还是要看组件的具体需求，但是都可能是对这些传值进行的一个应用，后续如果对封装有进一步了解，会进一步补充，敬请期待。。。