Vue组件复用多次自定义参数操作_vue同一个组件多次复用 - CSDN文库

180 浏览量更新于2023-05-04 评论收藏 100KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

Vue 组件复用多次自定义参数操作组件复用多次自定义参数操作

场景：场景：

当项目中多处出现相同的模块时，此时的正常考虑是将其做成公共组建，通过传参不同，实现多处复用

具体：具体：

背景：背景：项目使用的技术是VUE+ElementUI

此处，多处出现的模块是select选择框，封装成组件后，传给它option的值，代码如下：

<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页未读，立即下载

评论0

weixin_38517997

粉丝: 3
资源: 923

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈