问卷调查的路由传值与父子组件通信

上一节已经完成了问卷的添加与删除，现在只需要小小的改动就能实现一个修改功能。

1.进入修改页面和直接添加用的是同一个组件，但是进去修改页面需要把要修改的位置通过路由传值。

[code]this.$router.push({path: '/questionnaire/handle', query: {index: row}});

而不要传值的直接进入添加页面则只需要

[code] @click="$router.push('/questionnaire/handle')"

对应的路由配置也不要改变

[code]{ path: '/questionnaire', component: Questionnaire },
{ path: '/questionnaire/details', component: QuestionnaireDetails },
{ path: '/questionnaire/handle', component: QuestionnaireHandle },

2.在进入QuestionnaireHandle.vue组件后需要判断是新增还是修改：

[code]  created() {
this.index = this.$route.query.index;
if(this.index >= 0) {
let data = this.$store.state.questData[this.index];
this.ruleFormChild = [];
this.ruleForm.name = data.name;
this.ruleFormChild = data.questList;
this.titText = '修改问卷';
this.submitText = '立即修改'
}
},

index 默认值应该为-1

3.提交结果也需要判断一下

[code]let couponDatas = {
class: 'couponData',
data: couponData,
index: this.index,
}
if(this.index >= 0)  {
couponDatas.type = 'handle';
}else {
ouponDatas.type = 'add';
}
this.$store.commit('setData', couponDatas)
this.$router.push('/coupon')

这样新增和修改就可以直接共用一个组件了。

4.前面我们只是实现了问卷的简单添加还没有为问卷中选择题进行选项添加，这里我们就来实现一下：

[code]    <el-form-item label="问题选项" v-show="ruleForm.type != 3" class="option-answer">
<div v-for="(tag,index) in dynamicTags" :key="index"  class="answer-tag">
{{ String.fromCharCode(index + 65)}}:&nbsp;
<el-input
class="input-new-tag"
v-if="tag.boole"
v-model="tag.tagValue"
ref="saveTagInput"
size="small"
@keyup.enter.native="handleTagInputConfirm(index,$event)"
@blur="isflag && handleTagInputConfirm(index,$event)"
>
</el-input>
<span v-else @click="showTagInput(index)">
<el-tag closable :disable-transitions="false"
@close="handleClose(index)">{{tag.tagValue}}</el-tag>
</span>
</div>
<el-input
v-show="inputVisible"
v-model="inputValue"
ref="saveInput"
size="small"
@keyup.enter.native="handleInputConfirm"
@blur="handleInputConfirm"
class="input-new-tag"></el-input>
<el-button
v-show="!inputVisible"
@click="showInput"
icon="el-icon-circle-plus-outline"
class="button-news-tag">新增选项</el-button>
</el-form-item>

[code]        showTagInput(index) {
this.dynamicTags[index].boole = true;
this.isflag = true;
this.$nextTick(() => {
this.$refs.saveTagInput[0].$refs.input.focus();
});
},
handleClose(index) {
this.dynamicTags.splice(index, 1);
this.$emit("setAnswer", {
type: 'detele',
index: this.index,
number: index
});
},
handleTagInputConfirm(index,event) {
if(event.type === 'keyup') {
this.isflag = false;
}
this.dynamicTags[index].boole = false;
if(this.dynamicTags[index].tagValue === '') {
this.handleClose(index);
}else {
this.$emit("setAnswer", {
type: 'handle',
index: this.index,
number: index,
data: this.dynamicTags[index].tagValue
});
}
},
showInput() {
this.inputVisible = true;
this.$nextTick(() => {
this.$refs.saveInput.$refs.input.focus();
});
},
handleInputConfirm() {
if(this.inputValue != '') {
this.dynamicTags.push({
tagValue: this.inputValue,
boole: false
});
this.$emit("setAnswer", {
type: 'add',
index: this.index,
data: this.inputValue
});
}
this.inputVisible = false;
this.inputValue = '';
},

这里将修改父组件的数据全部来向父级组件触发一个事件setAnswer:

[code]    setAnswer(data) {
let list = this.ruleFormChild[data.index].answerList ?
this.ruleFormChild[data.index].answerList : [];
switch (data.type) {
case 'add':
list.push(data.data);
break;
case 'handle':
list.splice(data.number, 1, data.data)
break;
case 'detele':
list.splice(data.number, 1);
break;
default:
console.log('此函数还未被定义！')
break;
}
}

最终页面显示效果为：

这样就实现了父子组件的相互通信。