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.总结

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

相关推荐
一头小鹿2 分钟前
Vue 和 React中的状态管理机制
vue.js·react.js
jqq6663 分钟前
Vue3脚手架实现(七、渲染eslint配置)
前端·javascript·vue.js
Mintopia4 分钟前
BVH:光线追踪里的空间管家
前端·javascript·计算机图形学
Mintopia10 分钟前
Three.js 射线拾取原理:像素世界的侦探故事
前端·javascript·计算机图形学
天天鸭43 分钟前
写个vite插件自动处理系统权限,降低99%重复工作
前端·javascript·vite
江城开朗的豌豆1 小时前
Vue-router方法大全:让页面跳转随心所欲!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了1 小时前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆1 小时前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js