1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > vue 实现父子组件传值和子父组件传值

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

时间:2022-03-09 14:32:47

相关推荐

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

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

一、父组件

1.引入子组件

importrandomfrom"./child-random-paper";

2.注册子组件

components:{random,},

3. 静态组件,循环体

<liv-for="(item,index)inselectedTypeQuestion":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>

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

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

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,//试题分类idquestionClassifyId:"随机",//章节idquestionClassifyObject:"",//是否自定义isCustom:0,degree:0,//是否必抽题isExtracts:0,//当前剩余可选数量currentNum:"",},

对应关系

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

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

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

三、效果

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。