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

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/Seven521m/article/details/82910579

场景：

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

具体：

背景：项目使用的技术是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组件使用的初级教程吧，希望能够帮助到一些人。