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)


相关推荐

  • Linux Socket 编程原理详解

    Linux Socket 编程原理详解不用多说,经典的TCP/IP三次握手及状态变迁图================================================================================================================函数:socket()–创建套接字,它会创建一个结构体及收发缓冲区。此时并不指定该套接字在哪个IP和PORT口上,bind()–用于将套接字绑定在特定的IP/PORT上listen()–用于为侦听端口创建两个队列(见上图

    2022年10月17日
  • 使用OpenSSL生成证书-nginx「建议收藏」

    使用OpenSSL生成证书-nginx「建议收藏」使用OpenSSL生成证书1、生成RSA密钥的方法opensslgenrsa-des3-outprivkey.pem2048这个命令会生成一个2048位的密钥,同时有一个des3方法加密的密码,如果你不想要每次都输入密码,可以改成:opensslgenrsa-outprivkey.pem2048建议用2048位密钥,少于此可能会不安全或很快将不安全。2、生成一个证书请求opensslreq-new-keyprivkey.pem-outcert.csr这个命令将会

  • 动态规划经典题目_动态规划详解

    动态规划经典题目_动态规划详解一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为 “Start” )。机器人每次只能向下或者向右移动一步。机器人试图达到网格的右下角(在下图中标记为 “Finish” )。问总共有多少条不同的路径?示例 1:输入:m = 3, n = 7输出:28示例 2:输入:m = 3, n = 2输出:3解释:从左上角开始,总共有 3 条路径可以到达右下角。向右 -> 向下 -> 向下向下 -> 向下 -> 向右向下 -> 向右 -&gt

  • java video_video java, video java Suppliers and Manufacturers at Alibaba.com

    java video_video java, video java Suppliers and Manufacturers at Alibaba.com1/6$100.00-$350.00/Unit1.0Units(Min.Order)CardlanAFCMchinasupportJavaCardsforprogram,freeSDKforProgrammingOver17Years’ManufacturingExperienceShenzhenCardlanTechnologyCo.Wespec…

  • java判断字符串是否为空的方法总结

    方法一:本人推荐的方法,开发中最常用的方法,看起来也比较高大上:  if(StringUtils.isNotBlank(str))//判断字符串不为空  或if(StringUtils.isBlank(str))//判断字符串为空12方法二:比价简单直接的方法  if(s==null||"".equals(s));1方法三:比较字符串长度,效率高,比较绕:…

  • linux网络配置出现E325,Linux CentOS E325错误,如何解决?VI如何使用?「建议收藏」

    linux网络配置出现E325,Linux CentOS E325错误,如何解决?VI如何使用?「建议收藏」Linuxvi命令即vi编辑器,是Linux/UNIX环境下经典的编辑器。Linuxvi命令非常强大,可以使用它高效的编辑代码,配置系统文件等,运用非常广泛。但在Linux系统中打开vi编辑器时,不少朋友会提示E325:ATTENTION类的错误。那么,遇到这种情况后,该如何解决此类问题呢?为什么会出现E325:ATTENTION类的错误?出现此类错误是vi程序对文件的一种保护机制(…

发表回复

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

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