组件渲染及参数传递

最新推荐文章于 2024-04-18 09:54:34 发布
最新推荐文章于 2024-04-18 09:54:34 发布
阅读量229 收藏
点赞数
文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/su2231595742/article/details/115407456
版权

在vue项目中遇到这样一个问题，表单新增过程中需要向后端传递一组参数，参数格式如下：

这只为data中的一个对象

"probability": [{
			"difficulty": 1,
			"end": 5.0,
			"probability": 50,
			"start": 0.0
		}, {
			"difficulty": 1,
			"end": 8.0,
			"probability": 30,
			"start": 6.0
		}, {
			"difficulty": 1,
			"end": 10.0,
			"probability": 20,
			"start": 8.0
		}, {
			"difficulty": 2,
			"end": 5.0,
			"probability": 50,
			"start": 0.0
		}, {
			"difficulty": 2,
			"end": 8.0,
			"probability": 30,
			"start": 6.0
		}, {
			"difficulty": 2,
			"end": 10.0,
			"probability": 20,
			"start": 8.0
		}, {
			"difficulty": 3,
			"end": 5.0,
			"probability": 50,
			"start": 0.0
		}, {
			"difficulty": 3,
			"end": 8.0,
			"probability": 30,
			"start": 6.0
		}, {
			"difficulty": 3,
			"end": 10.0,
			"probability": 20,
			"start": 8.0
		}

	],

原型图如下：
在这里插入图片描述
要怎样实现这样的效果，在代码没有冗余的情况下，并且方便向后端传递参数？

分析：原型图中，难度配置分为三部分，（简单、普通、困难），在每一项中又有三条规则，一条规则中有三个参数，，但是后端接收只有四个字段。

可以看到 difficulty 分表难度，1、2、3分别代码简单、普通、困难，而 difficulty： 1 中，按顺序依次为规则一、规则二三。

方案一：

一个组件一个组件写，最简单粗暴的方法，虽然可以通过数组下标控制给每个参数赋值，但是代码数量有几百行，造成代码冗余，不符合开发理念，pass

方案二：

<template>
    <div>
        <el-dialog
            append-to-body
            :close-on-click-modal="false"
            :before-close="crud.cancelCU"
            :visible.sync="crud.status.cu > 0"
            :title="crud.status.title"
            width="650px"
        >
            <el-form
                ref="form"
                inline
                :model="form"
                :rules="rules"
                label-width="100px"
            >
                <el-form-item label="难度配置：">
                    <el-form-item label="简单" />
                    <el-form-item
                        v-for="(item, index) in form.probability"
                        :key="index"
                        :label="isRule(index)"
                        style="margin-bottom: 0px;"
                    >
                        <el-form-item prop="start">
                            <el-input-number
                                v-model="item.start"
                                :precision="1"
                                controls-position="right"
                                :min="1"
                                :step="0.1"
                                :max="10"
                                style="width: 100px;"
                            />
                        </el-form-item>
                        <span>—</span>
                        <el-form-item prop="end">
                            <el-input-number
                                v-model="item.end"
                                :precision="1"
                                controls-position="right"
                                :min="1"
                                :step="0.1"
                                :max="10"
                                style="width: 100px"
                            />
                        </el-form-item>
                        <el-form-item
                            label="概率："
                            style="margin-bottom: 0px; margin-left: 10px;"
                            prop="probability"
                        >
                            <el-input-number
                                v-model="item.probability"
                                controls-position="right"
                                :min="1"
                                :max="100"
                                style="width: 90px"
                            />
                            <span>%</span>
                        </el-form-item>
                    </el-form-item>
                </el-form-item>
            </el-form></el-dialog></div>
</template>

<script>
export default {
    name: 'Person',
    methods: {
    // 判断 规则
        isRule(index) {
            if (index === 0 || index === 3 || index === 6) {
                return '规则一：';
            } else if (index === 1 || index === 4 || index === 7) {
                return '规则二：';
            } else {
                return '规则三：';
            }
        }
}
</script>

实现效果如下：

在这里插入图片描述
这样已经基本可以渲染出组件，难度没有办法渲染出来，但是如何向后端传递参数还是问题

方案三：

 <el-form-item label="难度配置：">
                    <el-form-item
                        v-for="(item, index) in form.probability"
                        :key="index"
                        :label="isDifficulty(item.difficulty, index)"
                        style="margin-bottom: 0px;"
                    >
                        <el-form
                            ref="formItem"
                            :rules="formItemRules"
                        >
                            <el-form-item
                                :label="isRule(index)"
                                style="margin-bottom: 0px; margin-left: 24px;"
                                :required="true"
                            >
                                <el-form-item prop="start">
                                    <el-input-number
                                        v-model="item.start"
                                        :precision="1"
                                        controls-position="right"
                                        :min="1"
                                        :step="0.1"
                                        :max="10"
                                        style="width: 100px;"
                                    />
                                </el-form-item>
                                <span>—</span>
                                <el-form-item prop="end">
                                    <el-input-number
                                        v-model="item.end"
                                        :precision="1"
                                        controls-position="right"
                                        :min="1"
                                        :step="0.1"
                                        :max="10"
                                        style="width: 100px"
                                    />
                                </el-form-item>
                                <el-form-item
                                    label="概率："
                                    style="margin-bottom: 0px; margin-left: 10px;"
                                    prop="probability"
                                >
                                    <el-input-number
                                        v-model="item.probability"
                                        controls-position="right"
                                        :min="1"
                                        :max="100"
                                        style="width: 90px"
                                    />
                                    <span>%</span>
                                </el-form-item>
                            </el-form-item>
                        </el-form>
                    </el-form-item>
                </el-form-item>
<script>
export default {
    name: 'Person',
    methods: {
    // 判断 规则
        isRule(index) {
            if (index === 0 || index === 3 || index === 6) {
                return '规则一：';
            } else if (index === 1 || index === 4 || index === 7) {
                return '规则二：';
            } else {
                return '规则三：';
            }
        },
         // 判断难度是否显示和难度等级
        isDifficulty(difficulty, index) {
            if (index === 0 || index === 3 || index === 6) {
                if (difficulty === 1) {
                    return '简单：';
                } else if (difficulty === 2) {
                    return '普通：';
                } else {
                    return '困难：';
                }
            } else {
                return '';
            }
        },
}
</script>

在这里插入图片描述
最终实现组件渲染，可以按规定格式向后端传递参数，并且最大限度的降低了代码冗余。

渣渣苏
关注
VUE学习笔记之：组件、循环渲染和生命周期函数的组合使用
guxuhua123_01的博客
10-12 389
示例场景：一组用户名字数据，过滤其中满足条件的数据，然后循环给到子组件 首先， 用户名字的数据，示例中可以直接写死在data属性中，实际开发可以在VUE实例化之后(created生命周期函数)获取 代码如下： data: { nameList: [ { name: 'test1' ...
vue组件之间的参数传递
weixin_48446896的博客
10-19 424
vue组件之间的参数传递组件是什么那么组件与组件之间如何传参呢一、父组件给子组件传参二、子组件给父组件传参 子组件传给父组件最常用的就是emit三、父组件获取子组件的属性四、父组件中使用slot来完成子组件的渲染 slot是我用过最强大以及最简单有效的一个东西 当子组件需要渲染一个页面时，他既需要用到子组件的属性，有需要引入父组件的属性时就可以用slot来解决 组件是什么 首先组件 (Component) 是 Vue.js 最强大的功能之一，组件可以扩展 HTML 元素，封装可重用的代码。 但不是所有情况下
react学习笔记(二) 循环渲染组件+传参
王湘佰的博客
04-29 1360
react项目中如何渲染一个数组到页面中呢？ 我有这样的一个数组 this.state = { books:[ {name:"web前端开发入门",price:20}, {name:"数据库管理工程师",price:30}, {name:"IOS开发指南",price:29....
Vue.js系列——自定义组件之传值渲染
山不在高的博客
11-27 442
一个完整的例子如下，该例子自定义了一个博客标题组件h3，然后在根据博客文章具体情况进行动态赋值，展现在网页上。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>myproject</title> </head&...
Vue原理「十四」-- 组件渲染过程***
louShuMei 的博客
11-16 669
1.初次渲染过程 解析模板为render函数（或在开发环境中已完成，vue-loader） 触发响应式，监听data属性的getter setter 执行render函数，生成vnode, patch(elem,vnode) 2.更新过程 修改data，触发setter(此前getter中已被监听) 重新执行render函数，生成newVnode patch(vnode,newVnode) 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依
ng2-smart-table:Angular智能数据表组件
04-06
角度智能表组件 ng2-smart-table组件采用 :red_heart: 由。 在关注我们，首先获取有关此组件的最新消息！ :warning: 低维护 由于项目的优先级和资源的限制，该项目目前的维护成本较低。 我们认识到，围绕此一揽子计划有很多活动。 但是，我们无法容纳此项目所需的维护。 演示版 安装 该库以npm软件包的形式提供，因此您所需要做的就是运行以下命令： npm install --save ng2-smart-table 此命令将在您的package.json文件中创建一条记录，并将该软件包安装到npm modules文件夹中。 最小安装示例 您需要做的第一件事是将ng2-smart-table指令导入到您的组件中。 import { Ng2SmartTableModule } from 'ng2-smart-table'; 然后通过添加到模块的指令列表中进行注册： // ... @NgModul
React通过父组件传递类名给子组件的实现方法
10-19
handleClick方法用于处理点击事件，它不仅改变组件的状态，还会调用父组件传递下来的方法handle，并传入特定参数。 在render方法中，子组件使用props中的title和dataList来渲染对应的HTML结构。通过拼接this.props....
vue-router实现组件间的跳转（参数传递）
08-28
当用户访问某个路由时，Vue-Router 会根据路由规则，自动将对应的组件渲染到页面上。 二、实现组件间的跳转 要实现组件间的跳转，我们需要使用 Vue-Router 提供的 Router-link 组件和 Router.push 方法。Router-...
简单了解vue中父子组件如何相互传递值（基础向）
10-16
如果需要子组件向父组件传递数据，那么子组件会使用`$emit()`方法来触发一个自定义的事件，并将数据作为参数传递给这个事件的监听器。在父组件中，通过监听这个事件并执行相应的处理函数来接收数据。例如，子组件在...
Vue定义子组件与父组件通信数据并渲染（父向子通信和子向父通信）
最新发布
m0_60607245的博客
04-18 345
components:{//声明组件，在id为app的组件当中声明子组件，其子组件为introduce。”,//id为app的标签对应的数据。const app = new Vue({//(1)声明父级标签。el:“#app”, //element ,vue 作用的标签。父组件会重新覆盖其子组件的值，导致无法修改子组件的值，产生错误。看似效果可以但是实际子组件并没有影响父组件的数据，而且报错了。num的值是由父组件传递给子组件的值，当子组件修改其值的时候。二、子向父通信（并渲染数据）
（Vue爬坑）子组件的渲染时间比父组件的渲染时间快导致数据的问题
小人物的点点滴滴
11-07 5180
子组件的渲染时间比父组件的渲染时间快导致数据的问题 问题：父组件的在mounted钩子函数中拿接口的数据 ，然后渲染给子组件；因为子组件渲染的速度比父组件快，所以子组件的pros内的数据是空的 解决问题如下： 父组件页面》把请求接口的函数放在Vue.$nextTick()内 子组件页面》监听父组件传过来的数据 如果数据发生变化就渲染 父组件页面： <template> <di...
vue + vant根据后台传递数据动态渲染组件
Kayson13的博客
04-28 5901
根据后台数据动态渲染页面封装组件，方便使用field和actionsheet封装selectPicker等组件利用Render函数来渲染利用动态组件的属性is来渲染 需求：根据后台返回的数据，来生成一个form表单。几乎所有元素都是后台决定。后台会告诉前端这个页面里有几个input，label，select，selectDateTime等，以及他们的顺序。 封装组件，方便使用 field和acti...
Svelte学习笔记四——组件传参+条件渲染
qq_24724109的博客
05-13 3224
9. 定义组件参数 之前定义了无props的组件，如果想定义一个有props的组件，需要怎么操作呢？ 接受props的定义：我们需要在组件内部通过export let 的方式来定义组件从外部接受的props 默认值的设置：直接对定义的props赋值，就会作为组件的默认值 使用扩展运算符：如果有多个props，可以通过声明一个props对象然后利用扩展运算符…来简写 来看例子 <!-- Input.svelte --> <script> export let value;
17、将数据渲染到组件（列表渲染、模板语法、父子组件之间的传值）
weixin_33774615的博客
07-04 575
前言：GitHub：https://github.com/Ewall1106/mall（请选择分支17） 1、基础语法 （1）v-for语法https://cn.vuejs.org/v2/guide/list.html 我们用 v-for 指令根据一组数组的选项列表进行渲染。v-for 指令需要使用 it...
十个要点让你的渲染更好
xinguanren的专栏
09-13 389
渲染
小程序父组件向子组件传值（渲染子组件）
ju_vlog的博客
03-04 624
1.在子组件标签中使用 key="{{ value }}" 的形式进行传递。 <video-detail propos="{{item}}" bindtap="clickVideoItem" data-item="{{item}}"></video-detail> 2. 在子组件js文件中，使用properties：{}对象接收传递过来的数据 properties: { propos: { type: Object, defaul
vue的渲染函数 - render
nunumaymax的博客
08-24 4280
简单的说，在vue中我们使用模板HTML语法来组建页面的，使用render函数我们可以用js语言来构建DOM。因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。　　............
VUE3 之 循环渲染
追风人的博客
12-31 2713
目录 1. 概述 2. 循环渲染 3. 综述 4. 个人公众号 1. 概述 老话说的好：单打独斗是不行的，要懂得合作。 言归正传，今天我们来聊聊 VUE3 的 循环渲染。 2. 循环渲染 2.1 循环渲染数组 <body> <div id="myDiv"></div> </body> <script> const app = Vue.createApp({ // 创建一个vue应用实例
vue利用渲染函数创建弹窗组件，完美支持传值和事件监听(Vue2.X)
IT飞牛
08-24 3408
弹窗组件和其他组件不同，在页面初始化的时候，页面dom结构中是不存在弹窗组件的div节点，只有在调用时弹窗组件的div在会被动态的添加到页面中，并且当删除时，也需要在页面中删除； 结合弹窗组件的使用场景，比较合适的实现是使用createElement渲染函数，渲染函数可以动态的创建组件，并且通过props、on属性，传入组件的标题、内容，监听组件的事件； 观察看下面这段代码： const vm = new Vue({ render: h => { .
Vue组件复用与自定义参数传递实战
组件内部还定义了一个`handleChange`方法，当选择项发生变化时，会触发`my-event`自定义事件，并将新选中的值作为参数传递给父组件。 在父组件中，我们通过`<vSelect :options="options" @my-event="select"></v...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值