Vue 元件複用多次自定義引數
阿新 • • 發佈:2019-01-26
場景:
當專案中多處出現相同的模組時,此時的正常考慮是將其做成公共組建,通過傳參不同,實現多處複用
具體:
背景:專案使用的技術是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元件使用的初級教程吧,希望能夠幫助到一些人。