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}"> 
        &