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

vue通过下拉框组件了解Vue中父子组件通讯，本文主要通过写一些vue组件的小例子，然后认识到vue中的一些知识，让大家都学会vue框架的使用。

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

<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>

<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，仅供参考吧

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


.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的存在，一切都是数据的交互。