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

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

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

<!--父组件--><template><oSelect @changeOption="onChangeOption" :selectData="selectData"></oSelect><!--*父组件向组件传递参数首先要在父组件中绑定特定的参数,如:selectData;他等于数据selectData*这个数据便是我们要传给子组件的数据--></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}">         <!--            selectData.selectStatus根据此值的改变来联动是否含有class:select-title-active        -->        {{ selctData.selectOptions[selectData.defaultIndex].context }}     </h3>    <transition name="slide-down">    <!--        这里做一个下拉上拉的动画，主要是为了体验更好    -->    <ul class="select-options" v-show="selectData.selectStatus">        <!--            根据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.defaultIndex是否等于当前index，来增加被选中元素的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);             //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】添加公众号；

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