vue 通过下拉框组件了解Vue中父子组件通讯

最近很忙，一直没有时间写文章，接下来的时间，主要通过写一些vue组件的小例子，然后认识到vue中的一些知识，让大家都学会vue框架的使用

了解父子组件的通信，使vue组件化开发的第一步，所以这点很重要，希望这篇文章能后帮助你了解到父子组件中是如何通信的

<template>
<oSelect @changeOption="onChangeOption" :selectData="selectData">oSelect>

template>
<script>
import oSelect from "@/components/select.vue";
export default{
    name: 'App',
    data(){
        return {
            selectData: {
                defaultIndex: 0,//默认显示索引值
                selectStatus: false,//下拉框是否出现
                selectOptions: [ //下拉框中的数据
                    {
                        name: 'time',
                        context: '按时间排序'
                    },
                    {
                        name: 'view',
                        context: '按浏览量排序'
                    },
                    {
                        name: 'like',
                        context: '按点赞数排序'
                    },
                    {
                        name: 'reply',
                        context: '按回复数排序'
                    },
                    {
                        name: 'reward',
                        context: '按打赏数排序'
                    }
                ]
            }
        }
    },
    methods:{
        onChangeOption(index){
            /**此处的形参，就是子组件传过来的参数**/
            this.selectData.defaultIndex = index;
            //通过默认索引的改变，来改变选择的数据
        }
    },
    components: {
        oSelect
    }
}
script>

<template>
<div class="select-box" @click="changeStatus">
    <h3 class="select-title"
        :name="selectData.selectOptions[selectData.defaultIndex].name"
        --
            这一步主要是传递选择的值
        -->
        :class="{'select-title-active': selectData.selectStatus}"> 
        
        {{ selctData.selectOptions[selectData.defaultIndex].context }} 
    h3>
    <transition name="slide-down">
    
    <ul class="select-options" v-show="selectData.selectStatus">
        
        <li class="select-option-item" 
            v-for="(item,index) in selectData.selectOptions"
            @click="EmitchangeOption(index)"
            --
                点击时讲当前的索引值(index)传出去
            -->
            :class="{'select-option-active':selectData.defaultIndex===index}">
            
            {{ 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); 
            //changeOption为父组件中绑定的属性名字，一定要一致
            //改变选择的索引之后,传递个父组件
            //记住，子组件传数据给父组件使用 $emit
        },
        changeStatus(){
            this.selectData.selectStatus = !this.selectData.selectStatus
            //取反，来改变当前this.selectData的值
        }
    }
}
script>

---

最后效果如下

---

项目中的css，仅供参考吧

--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;
    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;
}
.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;
}

--下拉动画的css-->
.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);
}

其实使用vue这类mvvm框架主要的思想，就是忘记DOM的存在，一切都是数据的交互，好了，今天的文章就讲到这里了

想要了解更多的前端知识，请扫描下面二维码或者搜索微信公众号【大前端js】添加公众号；

手打不易，原创不易，转载时请注明转载出处，谢谢