VUE 主子组件常用遇到的一些问题和解决

主组件

<template>
    <div class="page">          
<div v-if="childShow==1" style="width: 100%">
 <commonRadio :child_model.sync='child' ref="childValidate"></commonRadio></div>
</div>
</template>
<script>
    import util from '@/libs/util';
    import commonRadio from '@/views/question/questionlist/childcomponents/commonRadio';

    export default {
        components: {
            'commonRadio': commonRadio,
        },
        name: 'questionAdd',
        watch: {},
        data() {

            return {        
                     child:{} 
        },
        methods: {
         init(){
            },  
        },
        mounted() {
        },
        activated() {
            this.init();
        },
    };
</script>

子组件

<template>
    <div>
        <Form :label-width="100" ref="child" :model="child" :rules="childValidate" inline style="width: 100%">
            <Span style="font-size: large">试题内容：</Span>
            <br>
            <Row>
                <FormItem label="试题标题：" prop="title">
                    <Input type="textarea"
                           :autosize="{minRows: 2,maxRows: 2}" v-model="child.title" style="width:400px;"/>
                    <FormItem>
                        <fileUpload ref="clearChildValue" :fileType.sync="child.fileType" :fileUrl.sync="child.fileUrl"
                                    :ossFileType.sync="ossFileType"
                                    @listenToChildEvent="getInsValueFrFileUpload"></fileUpload>
                    </FormItem>
                </FormItem>
            </Row> 
        </Form>
    </div>
</template>
<script>
 import fileUpload from '@/views/common/file/attachment-component';
 export default {
     name: 'commonRadio',
     props: ['child_model', 'correctAnswer'],
     components: {
         'fileUpload': fileUpload
     },
     data() {
       const answerValidate = (rule, value, callback) => {
             if (this.stem.type == 3) {
                 if (value === '') {
                     callback(new Error("必输"))
                 }
             }
             callback();
         };
         return {
             childAnswer: this.correctAnswer,
             child: this.child_model,
             childValidate: {
                 title: [
                     {required: true, message: '必填', trigger: 'change'},
                     {max: 500, message: '最大长度限制500', trigger: 'change'}
                    {pattern: /^([0-9]*)$/, message: '请填写数字', trigger:'blur'},
                     {validate:answerValidate ,trigger: 'blur'}
                  ],
             },
         };
     },
     watch: {
         child(val) {
             this.$emit('update:child_model', val);
         }
     },
     methods: {
         //加载选项ABC
         getABCList() {
             for (let i = 65; i < 91; i++) {
                 this.ABCList.push(String.fromCharCode(i));
             }
         },
     },
     mounted() {
         this.getABCList();
     },
     activated() {
     }
 }; 
</script>
<style scoped>
    .select {
        margin-right: 5px;
        color: #FF8000;
    }
</style>

主子组件

1. import commonRadio from ….
导入子组件
在页面上直接可以引用子组件
:child_model.sync=’child’ 主子组件通讯的值 通过 :child_model.sync 传过去。
在子组件的props:[‘child_model’] 里可以直接接收到，子组件可以直接使用
2. components:{‘commonRadio’:commonRadio}
接收子组件，把子组件当做一个标签来接受可以直接使用
3. ref=”childValidate”
建立一个链接 主组件通过这个ref 可以调用子组件字面的方法
this.$refs.childValidate.getABCList();
调用的是子组件的getABCList的方法，
注：这样既可验证子组件

   this.$refs.childValidate.$refs['child'].validate((valid) => {
                            flag = valid;
                        });

4. const answerValidate = (rule, value, callback) =>{}
在主页面全局定义一个 自定义验证 页面可以使用
5. watch: {
child(val) {
this.$emit(‘update:child_model’, val);
}},
监听事件，监听子组件值的变化，增加属性，改变属性的值都会触发，但是如果是child.list 集合里的元素顺序变化不会触发这个事件。
6. this.$emit(‘update:child_model’, val);
‘update:child_model’ 一个方法，改变child_model的值 值是val
即把val的值给child_model
7. methods: { },
里面定义这个组件的方法。
8. mounted() {},
组件第一次加载的时候即触发这个，里面一般放页面必须的元素
**9.**activated() {}，
组件再次调用的时候，不是重新加载，只是调用。一般列表刷新方法放里面。

form表单的验证

ref=”child” :model=”child” :rules=”childValidate”
1. child 是data里定义的对象，childValidate 是data里定义的一个对象 里面有验证规则
2. prop=‘title’ title 必须是child 里的属性 如果是child里的集合对象的属性，得加上index
:prop=“‘options.’ + index + ‘.option’” options 是child里的集合 index 是下标 option 是具体的对象
3. {pattern: /^([0-9]*)$/, message: ‘请填写数字’, trigger:’blur’},
验证类型是String 类型 如果编辑进来数据是number类型 则验证不通过。
4. 主组件里验证子组件
见主子组件3 的注