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

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

1.props传递

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

复制代码
<template>
    <div>
        这里是主组件
        <common :first="first"></common>
    </div>
</template>
​
<script setup lang="ts">
import common from './common.vue';
import {ref} from 'vue'
const first=ref('传入通用组件的值')

代码中common是定义的要封装的组件,这里first即是要传入的值

然后子组件要进行接收传来的值,如下

复制代码
<template>
    <div>
    这里是通用组件
    {{ props.first }}
    </div>
</template>
​
<script setup lang="ts">
​
const props=defineProps({
    first:String
})
</script>

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

2.监听参数变化

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

这里就用到watch了

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

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

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

3.触发事件

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

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

复制代码
<template>
    <div>
        这里是主组件
        <common :first="first" @getValue="getValue"></common> //这里的@就是绑定的方法
    </div>
</template>
​
<script setup lang="ts">
import common from './common.vue';
import {ref} from 'vue'
const first=ref('传入通用组件的值')
const getValue=(val:string)=>{ //注意这里的参数即是子组件想要传的值
    console.log(val);
}
</script>

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

复制代码
<template>
    <div>
    这里是通用组件
    {{ props.first }}
    </div>
</template>
​
<script setup lang="ts">
​
const props=defineProps({
    first:String
})
const emits=defineEmits(['getValue'])//这里进行定义接收
watch(
  props,
  (newVal) => {
    console.log(props,'props改变了');
    emits('getValue','我触发了') //想要触发时进行调用
  },
  {
    immediate: true,
  }
);
</script>

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

4.调用子组件方法

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

先用defineExpose将方法进行暴露

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

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

复制代码
<template>
    <div>
        这里是主组件
        <common :first="first" @getValue="getValue" ref="Common"></common>
    </div>
</template>
​
<script setup lang="ts">
import common from './common.vue';
import {ref,onMounted} from 'vue'
const first=ref('传入通用组件的值')
const getValue=(val:string)=>{
    console.log(val);
}
const Common=ref() //这里ref名称与上面绑定的ref要保持一致
onMounted(() => {
    Common.value.out('传给你')
    // 结果为 '我是子组件的方法 传给你'
});
</script>

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

5.插槽

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

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

6.总结

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

相关推荐
vvilkim22 分钟前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim25 分钟前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron
aha-凯心36 分钟前
vben 之 axios 封装
前端·javascript·学习
漫谈网络40 分钟前
WebSocket 在前后端的完整使用流程
javascript·python·websocket
失落的多巴胺2 小时前
使用deepseek制作“喝什么奶茶”随机抽签小网页
javascript·css·css3·html5
DataGear2 小时前
如何在DataGear 5.4.1 中快速制作SQL服务端分页的数据表格看板
javascript·数据库·sql·信息可视化·数据分析·echarts·数据可视化
影子信息2 小时前
vue 前端动态导入文件 import.meta.glob
前端·javascript·vue.js
青阳流月2 小时前
1.vue权衡的艺术
前端·vue.js·开源
RunsenLIu2 小时前
基于Vue.js + Node.js + MySQL实现的图书销售管理系统
vue.js·mysql·node.js
样子20182 小时前
Vue3 之dialog弹框简单制作
前端·javascript·vue.js·前端框架·ecmascript