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)
            }
        },
    }
</script>

以上的話便可以實現一個組件的簡單調用，選擇後的值會從子組件傳到父組件

問題：

多處使用同一個組件時，會代表不同的選項，拿到的值也需要做不同的處理，正常也可以通過寫多個方法來實現對取得的值的不同處理，但是這種方法不夠靈活。

解決：

此時自然而然想到的一種解決方法就是給上面的select函數再增加一個參數，根據參數不同進行不同的處理

但是真正實施起來卻發現會出現很多問題。

其實解決方法很簡單，就是一開始沒轉過來彎，還是花了一些時間，最終的解決方案就是使用回調函數：

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

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

回過頭來看，真的覺的這個壓根都不能算作一個問題，就當記錄一下作爲Vue組件使用的初級教程吧，希望能夠幫助到一些人。