vue 实现父子组件传值和子父组件传值

vue 实现父子组件传值和子父组件传值先上一张图,vue父子组件传值都用的图片。从张图入手了解如何传参。一、父组件1.引入子组件importrandomfrom”./child-random-paper”;2.注册子组件components:{random,},3.静态组件,循环体<liv-for=”(item,index)inselectedTypeQuestion”:key=”item.id”:ind…

大家好,又见面了,我是你们的朋友全栈君。

先上一张图,vue 父子组件传值都用的图片。从张图入手了解如何传参。

vue 实现父子组件传值和子父组件传值

一、父组件

1.引入子组件

import random from "./child-random-paper";

2.注册子组件 

components: {
    random,
  },

3. 静态组件,循环体

 <li
        v-for="(item, index) in selectedTypeQuestion"
        :key="item.id"
        :index="index"
        style="margin-top:10px"
      >
//引入子组件
        <random
          :questionType="selectTypeOfQuestion"
          :courseIds="courseId"
          :questionCount="testCountArray[index]"
          :questionTypeIds="questiontypeIdArray[index]"
          :index="index"
          @getValue="getMoreInfo"
          @getSource="getSource"
          @removeRandom="removeRandom"
        ></random>
      </li>

vue 实现父子组件传值和子父组件传值

通过循环试题类型数组,渲染子组件 

下拉框内容(每种题型只能出现一次)

4.子组件循环的数组就是这里push的value,是每种渲染出来的题型。

  //下拉框,查看该课程下的题型,如果试题模板为空,则渲染失败,提示输入题型。
    //否则选择子组件
    //查询该课程下的剩余试题
    selectChange(value) {
      //先判断数据中是否有该内容,如果没有加到数据,如果有不加到数组:
      if (this.selectedTypeQuestion.indexOf(value) == -1) {
        if (this.courseTemplate == "" || this.courseTemplate == undefined) {
          this.$confirm("请先输入试卷名称和总分值", "提示", {
            confirmButtonText: "确定",
            type: "warning",
          })
            .then(() => {})
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消删除",
              });
            });
        } else {
         this.selectedTypeQuestion.push(value);
    }
}

二、子组件

1.向父组件传值

用$emit函数进行传参,$emit函数用于防止子组件越权。向父组件传参的时候有两个内容,一个是父组件的方法,,这个方法用于监听子组件内容发生变化,及时能传给父组件。另外就是需要传的参数,这里的参数可以是一个,也可以是多个。 

handleChange(value) {
      console.log("题型的总成绩为:" + this.questionTypeAllSource);
      this.AllSource = this.questionTypeAllSource;
      this.$emit(
        "getValue",
        this.formInline,
        this.isExtractModel,
        this.AllSource
      );
    },

2.传递过去的参数(对象的形式),每个变量在父页面显示,动态变化

 formInline: {
        // 题型名称
        questionType: "",
        // 题型个数
        questionNum: "0",
        // 每题分数
        questionValue: "0",
        // 该题型的总共的分数
        AllSource: "",
        optionDisorder: "",
        //是否按空给分
        isBlanks: 0,
        //试题分类id
        questionClassifyId: "随机",
        // 章节id  
        questionClassifyObject: "",
        //是否自定义
        isCustom: 0,
        degree: 0,
        //是否必抽题
        isExtracts: 0,
        //当前剩余可选数量
        currentNum: "",
      },

 对应关系

vue 实现父子组件传值和子父组件传值

3.接受父组件传过来的值(用props接受) 

// 接受父组件传递过来的题型
  props: {
    questionType: {
      type: String,
      default: "",
    },
    index: "",
    questionLists: "",
    //每次循环渲染的时候传进来的题库剩余个数
    questionCount: "",
    //每次循环渲染的时候传进来的题型Id
    questionTypeIds: "",
    //课程id
    courseIds: "",
  },

 运用,下拉框为父组件的内容,选中的时候传到子组件,显示出来。

vue 实现父子组件传值和子父组件传值

三、效果

vue 实现父子组件传值和子父组件传值

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/134904.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • Ubuntu使用vdbench批量创建目录和文件「建议收藏」

    Ubuntu使用vdbench批量创建目录和文件「建议收藏」Vdbench是一个命令行实用程序,旨在生成用于验证存储性能和存储数据完整性的磁盘I/O负载。还可通过输入文本文件指定Vdbench执行参数,下面是使用vdbench批量创建目录和文件的示例1.先利用wget下载vdbench,比如当前版本为:vdbench503.zip2.再使用unzip命令解压缩,$unzipvdbench503.zip-d/data/

  • linux中设置固定ip(亲测有效)[通俗易懂]

    linux中设置固定ip(亲测有效)[通俗易懂]首先打开虚拟机  打开xshell5连接虚拟机(比较方便,这里默认设置过Linux的ip,只是不固定)输入ifconfig,可以查看网管相关配置信息:然后输入  vi/etc/sysconfig/network-scripts/ifcfg-ens33命令。修改网卡配置文件按i键进行编辑。修改入下,原有的配置不要删,只要按下面修改就好。没有的配置项新增上去就…

  • matlab运行结果图片如何保存_应对数据丢失最简单的方法

    matlab运行结果图片如何保存_应对数据丢失最简单的方法Matlab中图片保存的四种方法关键字:Saveas:>>saveas(gcf,[‘D:\保存的数据文件\方法1.png’])>>saveas(gcf,[‘D:\保存的数据文件\方法2′,’.png’])>>saveas(gcf,[‘D:\保存的数据文件\’,’方法3′,’.png’])Print:>>print(gcf,’-djpeg’,’C:…

  • PhpStorm 2021.12.13激活码(注册激活)[通俗易懂]

    (PhpStorm 2021.12.13激活码)最近有小伙伴私信我,问我这边有没有免费的intellijIdea的激活码,然后我将全栈君台教程分享给他了。激活成功之后他一直表示感谢,哈哈~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.cn/100143.htmlFN…

  • Java8新特性—stream流的使用

    Java8新特性—stream流的使用

  • linux查看分区类型(查看文件系统类型 centos)

    1,fdisk-l fdisk-l只能列出硬盘的分区表、容量大小以及分区类型,但看不到文件系统类型。2,df-hdf命令是用来查看文件系统磁盘空间使用量的。但df命令只会列出已挂载的文件系统信息,对于没有挂载的文件系统是查看不到的。使用这个命令可以很方便的查看已挂载的文件系统的空间使用量、剩余空间大小等信息。3,parted

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号