唯一有點兒現實意義的就是拿到的多選列表可能ajax從後臺拿到的, 這樣以後還有點兒借鑑的意思

<template>
    <div>
        below is App3:
        <br>
        <input v-model="myValue" />
        {{myValue}}
        <input v-model="myBox" type="checkbox" value="apple">
        Apple
        <input v-model="myBox"
 
 type="checkbox" value="peach">
        Peach
        <input v-model="myBox" type="checkbox" value="motorola">
        Motorola
        <br>
        {{myBox}}
        性別:
        <input type="radio">
        ------------------------<br>
        <div v-model="mySex">
            <
 
div v-for="sex in sexOption">
                <input type="radio" :value="sex.v" name="sexInput" @change="sexHandler(sex.v)"/>
                {{sex.name}}
            </div>
            你選擇了{{mySex}}
        </div>
        ------------------------<br>

        <select v-model
 
="mySelect" value='1'>
            <option v-for="item in selectOption" :value="item.price">
                {{item.name}}
            </option>

        </select> 你選擇了 {{mySelect}}


    </div>

</template>
<script>
    import CompA from './components/a'
    export default {
        components: {
            CompA: CompA
        },
        data() {
            return {
                selectOption: [{
                        name: 'apple',
                        price: 20
                    },
                    {
                        name: 'peach',
                        price: 30
                    }
                ],
                sexOption: [{
                        name: '男',
                        v: 1
                    },
                    {
                        name: '女',
                        v: 2
                    },
                    {
                        name: '保密',
                        v: 0
                    }
                ],
                myValue: '',
                myBox: [],
                mySelect: '',
                mySex:0

            }
        },
        methods: {
            triggleSome() {
                console.info('from triggersome function');
                this.$emit('my-event');
            },
            handleMyEvent() {
                console.info('from handle my event');
            },
            sexHandler(inputPara){
                this.mySex=inputPara;
                console.info('sex handler')
            }
            
        }

    }
</script>

兩段分割線中間的部分, 首先這個單選裡面到底有什麼內容, 是不是動態的? 還是靜態的? 如果是動態的, 是不是應該用select?

嗯, 值得留待以後觀察.

果然話音未落, 就有了一種牛逼的解耦寫法

首先 在要引入select的地方, 插入一個自定義元件

    <vSelect @onSelect="selectHandler"></vSelect>

當然別忘了引入vue檔案跟在components裡面宣告

那麼這個vue裡面, 一方面, 把這個select放進去:

<template>
    <div>
        <select v-model="mySelect" value='1' @change="sendEvent">
            <option v-for="item in selectOption" :value="item.price">
                {{item.name}}
            </option>

        </select> 你選擇了 {{mySelect}}
    </div>
</template>

注意@change繫結在select上

然後再用handler, emit你的選擇去父元件

<script>
    export default {
        data() {
            return {
                mySelect: 0,
                selectOption: [{
                        name: 'apple',
                        price: 20
                    },
                    {
                        name: 'peach',
                        price: 30
                    }
                ],
            };
        },
        methods: {
            sendEvent() {
                console.info('select changed')
                this.$emit('onSelect', this.mySelect);
            }

        }
    }
</script>

父元件再增加相應的自定義事件的處理方法即可.

selectHandler(whatUSelect) {
                console.info('this is select handler and you select ' + whatUSelect)
            }

這裡有個奇怪的事就是自定義的事件, 只能在自定義的元件中才能起作用, 不知道是不是this的問題, 以後會清楚的吧.