<h3 class="select-title"
:name="selectData.selectOptions[selectData.defaultIndex].name"
:class="{'select-title-active': selectData.selectStatus}">
<!--属性name class的动态绑定-->
{{ selectData.selectOptions[selectData.defaultIndex].context }}
<!--这里主要绑定选择的数据-->
</h3>
<transition name="slide-down">
<!--transition 实现下拉列表显示隐藏时的动画-->
<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：循环数据渲染下拉列表
EmitchangeOption：点击下拉列表事件
class：动态绑定被选中的数据
-->
{{ selectData.selectOptions[index].context }}
</li>
<div class="arrow-top"></div>
</ul>
</transition>
</div>
</template>
<script>
export default{
name: 'oSelect', //建议大家都写上这个，有利于我们知道这个组件叫什么名字
//通过props来接收父组件传过来的数据
props:{
selectData: {
type: Object //规定传过来的数据为对象，否则就会报错（其实这样写就是规避错误和良好的习惯）
}
},
methods:{
EmitchangeOption(index){
this.$emit('changeOption',index);
// 通过点击事件触发EmitchangeOption函数，传入当前点击下拉列表中的索引值index
// 下拉框通过emit方法触发父组件中changeOption函数，动态传给父组件需要的数据，这里为索引值
},
changeStatus(){
// 通过changeStatus事件动态改变selectStatus的值，从而控制下拉框的显示隐藏
this.selectData.selectStatus = !this.selectData.selectStatus
}
}
}
</script>
总结
从以上的示例可以看出来，父组件传入数据，需要在父组件中线绑定一个属性，挂载需要传入的数据；
子组件接收父组件的数据通过 props 方法来接收；
子组件传递数据需要使用 emit 方法来绑定父组件中事先设定好的方法，从而动态传递操作后需要的数据
最终效果如下：
附上组件中的css，仅供参考：
.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;
