<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() {},
组件再次调用的时候,不是重新加载,只是调用。一般列表刷新方法放里面。
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 的注