在使用vue父子传值过程中哪种最优？

最新推荐文章于 2023-02-27 09:56:07 发布
最新推荐文章于 2023-02-27 09:56:07 发布
阅读量197 收藏
点赞数
分类专栏： Vue 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40011543/article/details/106406397
版权

前提：有一个表格需要增删查改，表格需要修改数据，此时如果使用弹框，
将修改写成一个独立的vue单文件组件
1.在父页面这么写
修改template引入

<flowUpdate ref="flowUpdate" @query="refresh"></flowUpdate>

点击修改按钮，设置修改弹框的数据

update(row) {
		let flow = deepClone(row);
		this.$refs.flowUpdate.showUpdataFlow(flow);
}

在修改弹框页面设置设置表单数据

 showUpdataFlow(data) {
            this.updateFlowVisible = true;
            this.setFlowControl(data);
        },
        setFlowControl(data) {
            data.restrictedObjects2=data.restrictedObjects.split(",");
            this.flowControl = deepClone(data);
        },
  1. 直接使用props将数据传入修改弹框中
    请问哪种方式最优???理由是什么?
长成一棵参天树
关注
专栏目录
常用传值方式、父传子、子传父、非父子组件传值
weixin_44707104的博客
05-11 684
Vue常用的三种传值方式有： 父传子 子传父 非父子传值 引用官网的一句话：父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示： 下面我们就开始用代码详细的介绍vue组件传值的三种方式 1.父传子 子组件的代码： <template> <div id="container...
vue父子传值
随风而欲的博客
04-10 184
1，父传子 父组件 <template> <!-- 父传子 先在子组件上绑定，等号的左边是给子组件的 等号的右边是父组件的值 --> <Demo :params = "name"/> </template> <script> import Demo from './Demo' export default { name: 'App', data() { return { // 值在return里面写
父子组件之间的传值方式
weixin_43737605的博客
12-16 456
父子组件之间的传值方式 一、父组件传值给子组件 首先在components文件夹下创建一个子组件文件：rcheckbox.vue。 <template> <div id="vue_det"> <input type="checkbox" id="jack" value="Jack" v-model="checkedNames"> <la...
Vue组件中的父子传参,子父传参,兄弟传参,以及事件总线
多看书少吃饭的博客
04-20 2124
vue中的组件传参方式还是蛮多的,但是理解以后发现是非常很简单的,所以我在这里就做一个很简约的总结,首先是父子传参 父子传参 父组件中的代码 <template> <div> <!-- :getname 是自定义的 --> <son-1 :getname="name"></son-1> </div> </template> <script> import Son1 from '@
vue组件中最最最简单的传值方法
youjia727的博客
04-27 364
今天我把在公司开发用到的一些vue组件传值的方法分享给大家，首先组件传值有四种方式，网上流传的很多种方式，其实在公司开发中根本不需要那么多，搞懂这四种中其中一种就可以完成开发了
VUE优化使用属性进行父子传参【进行自我刷新】
默默的笔记
04-12 1041
记录一个今天的需求： 点击子组件中修改按钮之后，父组件中的数据更新 描述思路： 1、在子组件中设置方法，操作自身刷新； 2、子组件在调用父组件方法时，会调用父组件中的显示隐藏属性，隐藏自己 3、该属性在父组件中的设置应该和隐藏子组件的方法联系在一起 一、最基本写法 （1）、设置控制属性 setTimestamp 在控制页面转换的文件目录下mutation-type.js中设置 ...
vue 父子传值 方法大全
程序员小哲的博客
10-09 3384
vue 父子传值 方法大全一、通过props传递数据父页面子页面二、子控件给父控件传递值父页面子页面三、插槽slot四、vuex 一、通过props传递数据 只能是父控件传递给子控件 父页面 <template> <div id="app"> <HelloWorld1 width="400" height="500" arr="[1,2,3,4,5]" /> </div> </template> <script> i
Vue开发中的一些常见套路和技巧（上）
HTML网页设计
08-08 364
首先通过props中注册的value属性，注意必须为value,其实就是使用$emit抛出一个名字为input（必须）的事件，将需要修改的值传递进去，那么就可以在负组件中通过v-model指令进行数据的绑定了。porps: {value: {}}$emit('input', 回馈的内容)复制代码我现在大多数时候，都觉得当使用 Vue 后，很容易触摸到瓶颈。当我想在进行深层次的时候却发现前方的路非常的窄小。大部分时间都是在做一些熟能生巧的东西。...
阿里前端常考vue面试题汇总
bb_xiaxia1998的博客
02-27 294
题目分析回答范例实现我们可以像下面这样简单实现和，从而辨别两者不同 如何在组件中批量使用Vuex的getter属性 使用mapGetters辅助函数, 利用对象展开运算符将getter混入computed 对象中 Vue组件之间通信方式有哪些 组件传参的各种方式组件通信常用方式有以下几种根据组件之间关系讨论组件通信最为清晰有效1. 父子组件通信父组件模板: 子组件模板: 回调函数（callBack）父传子：将父组件里定义的作为传入子组件 子组件向父组件通信父组件模板: 子组件模板: 2. provide
19 道高频 vue 面试题解答（下）
bb_xiaxia1998的博客
10-10 623
指令本质上是装饰器，是 vue 对 HTML 元素的扩展，给 HTML 元素增加自定义功能。vue 编译 DOM 时，会找到指令对象，执行指令的相关方法。自定义指令有五个生命周期（也叫钩子函数），分别是 bind、inserted、update、componentUpdated、unbind1. bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。2. inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
前端一面常见vue面试题汇总
bb_xiaxia1998的博客
02-27 328
的问题主要有三个：Proxy的优势如下:proxy详细使用点击查看(opens new window)Object.defineProperty的优势如下:defineProperty的属性值有哪些 相关代码如下 只会代理对象的第一层，那么又是怎样处理这个问题的呢？监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？组件通信的方式如下：父组件通过向子组件传递数据，子组件通过和父组件通信 2. 子组件向父组件传值 绑定一个自定义事件，当这个事件被执行的时就会将参数传递给父组件，而父组件通过监
子组件向父组件传值_vue父子组件传值
weixin_39554172的博客
11-25 196
先来说下父传子吧，需要先在父组件中引用子组件<m-child></m-child>这种写法是vue文档规定的，建议这样写，不清楚的可以看下文档。然后在子组件中用props对象接收一下<m-child :msg="'hello world'"></m-child>中的msg，在把msg渲染到子组件中，这样就完成了一个简单的父传子再说一下子传父：在子组件...
关于非父子之间传值以及父子之间传值的问题！
weixin_44269229的博客
04-15 873
关于非父子之间传值以及父子之间传值的问题！ 父组件向子组件传值： 父传子通过props进行传值； 下面直接上代码： 父组件： <template> <div> 父组件: <input type="text" v-model="name"> <br> <br> <!-- 引入子组件 --&...
vue父子传值。一看就看明白的
有问题可关注公众号：前端研究院 后台输入问题回复
07-31 882
父组件传值 子组件接受
Vue中父子组件动态传值最好用的一种方法
Tian丶Yuting
02-09 618
父组件，在js事件中操作 // 将变化的值传给子组件，绑定的函数要跟子组件中绑定的函数一样 this.$emit('绑定的函数', '你要传的值') 子组件，在HTML标签使用 <!-- 绑定的函数要跟父组件this.$emit中传过来的绑定的函数一样 --> <Headers @绑定的函数='绑定传过来的值' /> 子组件中，如果父组件传过来的值有变化，可以执行 绑定传过来的值(value){ // 你想做的事情 } 刚启动项目，如果父组件没有传过来值，可以在mounted
Vue中的父子传值问题
热门推荐
毛毛虫博客
06-18 2万+
说个正事。此文章将首发于个人博客网站，为了更好的用户体验以及不影响后续阅读，请用您高傲的小手手点击下方的原文链接。 求您了，点它！！！=>原文链接 好久没更博了，感觉下班后的时间莫名其妙就没有了，有了，了。。。 趁着端午放假，更一篇博吧，也算是对已过半的6月一个交代。恩，已过大半~ 主题是Vue中几种常见的传值方法。。。先写个父子传值吧 vue-...
父子组件传值的几种方法
qq_36145755的博客
08-09 6964
一 Prop 向子组件传递数据，$emit监听子组件事件 //子组件 Vue.component('Child', { props: ['title'], template: '<h3>{{ title }}</h3>' }) //父组件调用 <Child title="My journey with Vue"></Child> //子组件 <button v-on:click="$emit('enlarge-text')">
浅谈vue组件通信之父子组件传值的几种方式
kalenE992的博客
04-05 1445
下面介绍vue父子传值的几种方式： props 官方文档传送 在项目views文件夹中创建一个parent.vue和一个child.vue的文件。 parent.vue 首先在parent.vue里面引入一个child做为子组件，然后在components里面声明。接着在template中使用这个组件，并使用属性props方式传值一个名为msg的属性。具体实现方式。 child.vue 在pro...
一文快速详解前端框架 Vue 最强大的功能
CSDN资讯
05-21 5145
作者 | 浪里行舟 责编 | 胡巍巍 组件是 vue.js最强大的功能之一，而组件实例的作用域是相互独立的，这就意味着不同组件之间的数据无法相互引用。一般来说，组件可以有以下几种关系： 如上图所示，A 和 B、B 和 C、B 和 D 都是父子关系，C 和 D 是兄弟关系，A 和 C 是隔代关系（可能隔多代）。 针对不同的使用场景，如何选择行之有效的通信方式？这是我们所要探讨的主...
vue父子传值使用props，父组件中必须打开子组件吗
最新发布
07-22
在Vue中，父组件必须将子组件放在其模板中才能使用props进行传值。也就是说，父组件必须在其模板中使用子组件的标签，并通过props属性传递值给子组件。 如果父组件没有在模板中使用子组件的标签，那么就无法直接...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值