vue 通過(guò)下拉框組件學(xué)習(xí)vue中的父子通訊

<!--下拉框父組件-->
<template>
 <div id="app">
 <oSelect @changeOption="onChangeOption" :selectData="selectData"></oSelect>
 <!--
 selectData: 傳入父組件需要傳入的數(shù)據(jù)；格式:childDataName="parentDataName";
 onChangeOption： 子組件觸發(fā)的事件名，通過(guò)觸發(fā)一個(gè)事件從而來(lái)接收子組件的傳過(guò)來(lái)的數(shù)據(jù)
 格式：@childEventName="parentEventName"
 注：可寫(xiě)多個(gè)
 -->
 </div>
</template>
<script>
import oSelect from "@/components/select.vue"; //引入組件
export default{
 name: 'App',
 data(){
 return {
 selectData: {
 defaultIndex: 0, //默認(rèn)選中的是第幾個(gè)
 selectStatus: false, // 通過(guò)selectStatus來(lái)控制下拉框的顯示/隱藏
 selectOptions: [ // 下拉框中的數(shù)據(jù) name這樣的參數(shù)，看項(xiàng)目是否有需求，可自行修改
 {
 name: 'time',
 context: '按時(shí)間排序'
 },
 {
 name: 'view',
 context: '按瀏覽量排序'
 },
 {
 name: 'like',
 context: '按點(diǎn)贊數(shù)排序'
 },
 {
 name: 'reply',
 context: '按回復(fù)數(shù)排序'
 },
 {
 name: 'reward',
 context: '按打賞數(shù)排序'
 }
 ]
 }
 }
 },
 methods:{
 onChangeOption(index){
 //子組件通過(guò)一個(gè)事件來(lái)觸發(fā)onChangeOption方法，從而傳遞一系列參數(shù)，這里的index就是傳過(guò)來(lái)的
 this.selectData.defaultIndex = index;
 //觸發(fā)過(guò)后，動(dòng)態(tài)改變了需要值 
 }
 },
 components: {
 oSelect,
 //注冊(cè)組件
 }
}
</script>

<template>
<!-- 下拉框組件html結(jié)構(gòu)（子組件） -->
<div class="select-box" @click="changeStatus">
<!-- changeStatus事件: 點(diǎn)擊實(shí)現(xiàn)下拉框的顯示和隱藏 -->
<h3 class="select-title"
 :name="selectData.selectOptions[selectData.defaultIndex].name"
 :class="{'select-title-active': selectData.selectStatus}"> 
 <!--屬性name class的動(dòng)態(tài)綁定-->
 {{ selectData.selectOptions[selectData.defaultIndex].context }} 
 <!--這里主要綁定選擇的數(shù)據(jù)-->
</h3>
<transition name="slide-down">
<!--transition 實(shí)現(xiàn)下拉列表顯示隱藏時(shí)的動(dòng)畫(huà)-->
<ul class="select-options" v-show="selectData.selectStatus">
 <li class="select-option-item" 
 v-for="(item,index) in selectData.selectOptions"
 @click="EmitchangeOption(index)"
 :class="{'select-option-active':selectData.defaultIndex===index}">
 <!--
 v-for：循環(huán)數(shù)據(jù)渲染下拉列表
 EmitchangeOption：點(diǎn)擊下拉列表事件
 class：動(dòng)態(tài)綁定被選中的數(shù)據(jù)
 -->
 {{ selectData.selectOptions[index].context }}
 
 </li>
 <div class="arrow-top"></div>
</ul> 
</transition> 
</div> 
</template>
<script>
export default{
 name: 'oSelect', //建議大家都寫(xiě)上這個(gè)，有利于我們知道這個(gè)組件叫什么名字
 //通過(guò)props來(lái)接收父組件傳過(guò)來(lái)的數(shù)據(jù)
 props:{
 selectData: {
 type: Object //規(guī)定傳過(guò)來(lái)的數(shù)據(jù)為對(duì)象，否則就會(huì)報(bào)錯(cuò)（其實(shí)這樣寫(xiě)就是規(guī)避錯(cuò)誤和良好的習(xí)慣）
 }
 },
 methods:{
 EmitchangeOption(index){
 this.$emit('changeOption',index);
 // 通過(guò)點(diǎn)擊事件觸發(fā)EmitchangeOption函數(shù)，傳入當(dāng)前點(diǎn)擊下拉列表中的索引值index
 // 下拉框通過(guò)emit方法觸發(fā)父組件中changeOption函數(shù)，動(dòng)態(tài)傳給父組件需要的數(shù)據(jù)，這里為索引值
 },
 changeStatus(){
 // 通過(guò)changeStatus事件動(dòng)態(tài)改變selectStatus的值，從而控制下拉框的顯示隱藏
 this.selectData.selectStatus = !this.selectData.selectStatus
 }
 }
}
</script>

.select-box{
 position: relative;
 max-width: 250px;
 line-height: 35px;
 margin: 50px auto;
}
.select-title{
 position: relative;
 padding: 0 30px 0 10px;
 border: 1px solid #d8dce5;
 border-radius: 5px;
 transition-duration: 300ms;
 cursor: pointer;
}
.select-title:after{
 content: '';
 position: absolute;
 height: 0;
 width: 0;
 border-top: 6px solid #d8dce5;
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 right: 9px;
 top: 0;
 bottom: 0;
 margin: auto;
 transition-duration: 300ms;
 transition-timing-function: ease-in-out;
}
.select-title-active{
 border-color: #409eff;
}
.select-title-active:after{
 transform: rotate(-180deg);
 border-top-color: #409eff;
}
.select-options{
 position: absolute;
 padding:10px 0;
 top: 45px;
 border:1px solid #d8dce5;
 width: 100%;
 border-radius: 5px;
}
.select-option-item{
 padding:0 10px;
 cursor: pointer;
 transition-duration: 300ms;
}
.select-option-item:hover,.select-option-active{
 background: #f1f1f1;
 color: #409eff;
}
<!--箭頭css-->
.arrow-top{
 position: absolute;
 height: 0;
 width: 0;
 top: -7px;
 border-bottom: 7px solid #d8dce5;
 border-left: 7px solid transparent;
 border-right: 7px solid transparent;
 left: 0;
 right: 0;
 margin: auto;
 z-index: 99;
}
.arrow-top:after{
 content: '';
 position: absolute;
 display: block;
 height: 0;
 width: 0;
 border-bottom: 6px solid #fff;
 border-left: 6px solid transparent;
 border-right: 6px solid transparent;
 left: -6px;
 top: 1px;
 z-index: 99;
}
<!--下拉框顯示隱藏動(dòng)畫(huà)-->
.slide-down-enter-active,.slide-down-leave{
 transition: all .3s ease-in-out;
 transform-origin:0 top;
 transform: scaleY(1);
}
.slide-down-enter{
 transform: scaleY(0);
}
.slide-down-leave-active{
 transition: all .3s ease-in-out;
 transform-origin:0 top;
 transform: scaleY(0);
}