vue 答题小组件

最新推荐文章于 2024-12-16 23:28:30 发布

原创

最新推荐文章于 2024-12-16 23:28:30 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue.js中创建一个答题小组件，详细阐述了父组件与子组件之间的通信，包括数据传递和事件监听，展示了在前端开发中利用Vue组件化特性提升应用模块化的实践。

父组件：

<template>
  <div class="wrap">
    <div>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="125px" class="demo-ruleForm">
        <el-form-item label="请问您的性别是？" prop="radio"  v-if="showOn === 0">
          <el-radio-group v-model="ruleForm.radio" @change="checkRadio">
            <el-radio :label="1">男</el-radio>
            <el-radio :label="0">女</el-radio>
            <el-radio :label="2">保密</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="请选择您的兴趣爱好？" prop="checkList"  v-if="showOn === 1">
          <el-checkbox-group v-model="ruleForm.checkList" @change='changeList'>
            <el-checkbox label="看书"></el-checkbox>
            <el-checkbox label="游泳"></el-checkbox>
            <el-checkbox label="跑步"></el-checkbox>
            <el-checkbox label="看电影" ></el