空间设计公司,百度做网站优化多少钱一年,seo监控系统,博览局网站建设用了很久一段时间Vue3Ts了#xff0c;工作中对一些常用的组件也进行了一些封装#xff0c;这里对封装的一些方法进行一些简单的总结。
1.props传递
首先在主组件进行定义传值
templatediv这里是主组件common :firstfirst/commonTs了工作中对一些常用的组件也进行了一些封装这里对封装的一些方法进行一些简单的总结。
1.props传递
首先在主组件进行定义传值
templatediv这里是主组件common :firstfirst/common/div
/template
script setup langts
import common from ./common.vue;
import {ref} from vue
const firstref(传入通用组件的值)
代码中common是定义的要封装的组件这里first即是要传入的值
然后子组件要进行接收传来的值如下
templatediv这里是通用组件{{ props.first }}/div
/template
script setup langts
const propsdefineProps({first:String
})
/script
这里与vue2不同的是需要利用defineProps进行参数的接收我这里用到了TS所以也加入了类型声明。
2.监听参数变化
在一些业务中父组件传给子组件的数据有时候是动态的这个时候就需要对参数的改变进行识别了
这里就用到watch了
watch(props,(newVal) {console.log(props,props改变了);},{immediate: true,}
);
对props进行监听如果进行改变然后怎么进行操作可以更细节的处理了。
这里watch的使用可以参考官网响应式 API核心 | Vue.js
3.触发事件
子向父亲传递信息或者使用父亲的方法应该怎么做呢这是就是用到emits了
首先父组件对子组件绑定方法
templatediv这里是主组件common :firstfirst getValuegetValue/common //这里的就是绑定的方法/div
/template
script setup langts
import common from ./common.vue;
import {ref} from vue
const firstref(传入通用组件的值)
const getValue(val:string){ //注意这里的参数即是子组件想要传的值console.log(val);
}
/script
绑定后需要在子组件进行接收
templatediv这里是通用组件{{ props.first }}/div
/template
script setup langts
const propsdefineProps({first:String
})
const emitsdefineEmits([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绑定子组件获取其方法
templatediv这里是主组件common :firstfirst getValuegetValue refCommon/common/div
/template
script setup langts
import common from ./common.vue;
import {ref,onMounted} from vue
const firstref(传入通用组件的值)
const getValue(val:string){console.log(val);
}
const Commonref() //这里ref名称与上面绑定的ref要保持一致
onMounted(() {Common.value.out(传给你)// 结果为 ‘我是子组件的方法 传给你’
});
/script
这里就是先用ref绑定然后利用其调用方法括号内的参数即在子组件定义参数。
5.插槽
插槽方法可以见我以前总结的内容这里不再详细讲解
vue中的插槽详细介绍_and design vue树形控件插槽title要多个字段_时雨.的博客-CSDN博客
6.总结
上述内容其实就是对常用的组件传值进行的一个总结真实内容封装其实还是要看组件的具体需求但是都可能是对这些传值进行的一个应用后续如果对封装有进一步了解会进一步补充敬请期待。。。
