seven's blog | Vue 组件复用多次自定义参数

Vue 组件复用多次自定义参数
2018年09月30日

场景:

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

具体:

背景:项目使用的技术是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)
            }
        },
    }
</script>

以上的话便可以实现一个组件的简单调用,选择后的值会从子组件传到父组件

问题:

多处使用同一个组件时,会代表不同的选项,拿到的值也需要做不同的处理,正常也可以通过写多个方法来实现对取得的值的不同处理,但是这种方法不够灵活。

解决:

此时自然而然想到的一种解决方法就是给上面的select函数再增加一个参数,根据参数不同进行不同的处理

但是真正实施起来却发现会出现很多问题。

其实解决方法很简单,就是一开始没转过来弯,还是花了一些时间,最终的解决方案就是使用回调函数:

<vSelect :options="options" @my-event="val=>select(val,param)"></vSelect>

select(value,param) {
   console.log(value,param)
}

回过头来看,真的觉的这个压根都不能算作一个问题,就当记录一下作为Vue组件使用的初级教程吧,希望能够帮助到一些人。

30 Sep 2018