Vue 组件复用多次自定义参数操作组件复用多次自定义参数操作
场景：场景：
当项目中多处出现相同的模块时，此时的正常考虑是将其做成公共组建，通过传参不同，实现多处复用
具体：具体：
背景：背景：项目使用的技术是VUE+ElementUI
此处，多处出现的模块是select选择框，封装成组件后，传给它option的值，代码如下：
<!--组件文件 比如说这个组件叫 vSelect 下面会用-->
<template>
<el-select
@change="handleChange"
v-model="value"
:placeholder="请选择">
<el-option
v-for="(item,index) in options"
:key="index"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
</template>
<script>
export default {
data() {
return {
value: '',
}
},
props:['options'],
methods: {
handleChange(value) {
this.$emit('my-event',value);
}
},
}
</script>
使用时只需把文件import进来，代码如下：
<template>
<vSelect :options="options" @my-event="select"></vSelect>
</template>
<script>
import vSelect from '文件路径'
export default {
data() {
return {
options: [
{
value:0,
label:'选项一'
},
{
value:1,
label:'选项二'
},
],
}
},
components: {
vSelect
},
methods: {
select(value) {
console.log(value)
}
},
剩余6页未读，继续阅读
资源评论
weixin_38517997
- 粉丝: 3
- 资源: 922
最新资源
- (源码)基于Java和MySQL的学生信息管理系统.zip
- (源码)基于ASP.NET Core的零售供应链管理系统.zip
- (源码)基于PythonSpleeter的戏曲音频处理系统.zip
- (源码)基于Spring Boot的监控与日志管理系统.zip
- (源码)基于C++的Unix V6++二级文件系统.zip
- (源码)基于Spring Boot和JPA的皮皮虾图片收集系统.zip
- (源码)基于Arduino和Python的实时歌曲信息液晶显示屏展示系统.zip
- (源码)基于C++和C混合模式的操作系统开发项目.zip
- (源码)基于Arduino的全球天气监控系统.zip
- OpenCVForUnity2.6.0.unitypackage
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
