vue父子页面传值

#父页面

<template>
    <div class="tab-inner mb200">
        <query-condition @clickInfo="clickInfos"   // 子页面 例如：查询条件; query-condition映射子页面的文件名：queryConditio.vue
		:skill-group-list="skillGroupList"> 
       </query-condition>		
	   // @clickInfo在子页面  clickInfos是父页面的方法，接收子页面传递过来的值 
		//skillGroupList，是父页面传递的数据到子页面的，子页面在props定义类型即可
	   
    </div>
</template>
<script>
 impot queryCondition from './queryCondition.vue'    // 导入子页面
 impot reviweList from './reviweList.vue'
    export default {
        name: 'ClbimRole',
        data () {
            return {
                
            }
        },
		component: {
		 queryCondition,     // 子页面
		 reviweList
		},

        
        //页面加载的时候执行
        mounted() {
            this.getProSkill()
        },

        //用于非技能组成员列表的模糊查询当列表在第二页时,仍然可以模糊查询,
        computed: {

            detailedUserId(){
                return this.formValidate8.seatUserId;
            },
            detaileUserName(){
                return this.formValidate8.userName;
            },

        },

        //监听computed是否有变化
        watch:{

            detailedUserId(newValue, oldValue){
                this.formValidate8.size=10;
                this.formValidate8.page=1;
            },
            detaileUserName(newValue, oldValue){
                this.formValidate8.size=10;
                this.formValidate8.page=1;
            }

        },

        methods: {

            clickInfos:function(formValidate){  // formValidate就是子页面传递过来的值，例如：查询条件输入框的数据
                this.formValidate=formValidate;
                this.getUser();
            }

            //获取选择行数据
            getSelect7: function (selection) {
                this.update7 = selection;
            },

            getSelect8: function (selection) {
                this.update8 = selection;
            },

          /*  //inSkillGroupUserListData分页翻页
            pageChange6: function (page) {
                this.formValidate.page = page;

                this.getProSkill();

            },
            //更换每页显示数量
            sizeChange6: function (size) {
                this.formValidate.size = size;
                this.getProSkill();
            },*/

            //inSkillGroupUserListData分页翻页
            pageChange7: function (page) {
                this.formValidatePepole.page = page;

                this.getSkillUser();

            },
            //更换每页显示数量
            sizeChange7: function (size) {
                this.formValidatePepole.size = size;
                this.getSkillUser();
            },


            //notInSkillGroupUserListData分页翻页
            pageChange8: function (page) {
                this.formValidate8.page = page;
                //刷新
                this.getUser();
            },
            //更换每页显示数量
            sizeChange8: function (size) {
                this.formValidate8.size = size;
                //刷新

                this.getUser();

            },
          
        }
    }
</script>
<style lang="less" scoped>
    @import '../../common/styles/bimcommon';
</style>

#子页面

<template>
    <div class="tab-inner mb200">
        <div class="cond-wrap mb30 mt30">
                <Form ref="formValidate" :model="formValidate" :label-width="110">
                    <Row class="clearfix">
                        <Col span="8">
                        <FormItem span="8" label="技能组编码" prop="serviceId">
                            <Input class="cmcc-input" size="large" v-model="formValidate.serviceId" placeholder="请输入编码"></Input>
                        </FormItem>
                        </Col>
                        <Col span="8">
                        <FormItem span="8" label="技能组名称" prop="serviceName">
                            <Input class="cmcc-input" size="large" v-model="formValidate.serviceName" placeholder="请输入名称"></Input>
                        </FormItem>
                        </Col>
                        <Col span="8" class="f-r mod-form-btn">
                        <Button type="primary" class="cmcc-btn-primary w100" v-on:click="clickSkill" :loading="selectSkill">查询</Button>
                        </Col>
                    </Row>
                </Form>
            </div>
	</div>
</template>
<script>
    export default {
        name: 'ClbimRole',
		props:{
		   skillGroupList:{  // 接收父组件传递过来的值
		     type：Array
		   }
		}
        data () {
            return {
                
                formValidate: {
                    serviceId:'',
                    serviceName:'',
                    startItem:0,
                    maxItem:500,
                    total:0,
                    page: 1,
                    size: 10
                },
            }
        },
		component: {
		
		},

        
        //页面加载的时候执行
        mounted() {
            
        },

        //用于非技能组成员列表的模糊查询当列表在第二页时,仍然可以模糊查询,
        computed: {

        },

        //监听computed是否有变化
        watch:{


        },

        methods: {

            clickSkill:function(){
                console.log(this.skillGroupList)  // 打印父组件传递过来的值
				this.$emit('clickInfo', this.formValidate) // 通过$emit将子页面的数据传递给父页面，，clickInfo就是父页面的@clickInfo一致
            }

          
        }
    }
</script>
<style lang="less" scoped>
    @import '../../common/styles/bimcommon';
</style>dd