例子
用$emit 綁定自定義事件 $emit("receive",item) 然后再觸發父子的自定義事件 執行函數 v-on:receive="changeValueHandle" changeValueHandle(value){this.val = value;} item 就是要傳入父級的值，value就是接收 item的
<body>
<div id="app">
<div style="float: left;">
<h2>自定義的下拉框</h2>
<custom-select btn="查詢" v-bind:list="list1"></custom-select>
</div>
<div style="float:left;">
<h2>自定義的下拉框2</h2>
<custom-select btn="搜索" v-bind:list="list2"></custom-select>
</div>
</div>
<script>
/*var obj = {
selectShow:false
}*/
//注冊組件
Vue.component("custom-select",{
data:function(){
return {
selectShow:false,
val:""
};
},
props:["btn","list"],
template:`<section class="warp">
<div class="searchIpt clearFix">
<div class="clearFix">
<input type="text" class="keyWord" :value="val" @click="selectShow = !selectShow" />
<input type="button" :value="btn">
<span></span>
</div>
<custom-list
v-show="selectShow"
:list="list"
v-on:receive="changeValueHandle"
></custom-list>
</div>
</section>`,
methods:{
changeValueHandle(value){
//alert("我被觸發了,值為："+value);
this.val = value;
}
}
})
Vue.component("custom-list",{
props:["list"],
template:`<ul class="list">
<li v-for="item of list" @click="selectValueHandle(item)">{{item}}</li>
</ul>`,
methods:{
selectValueHandle:function(item){
//在子組件中有交互
//告知父級，改變val的值，需要出發一個自定義事件
this.$emit("receive",item);
}
}
})
new Vue({
el:"#app",
data:{
list1:["北京","上海","杭州"],
list2:["17-02-17","17-02-18","17-02-19"]
}
});
</script>
</body>