vue父子组件传值之单向数据流非常详细的讲解(二)

最新推荐文章于 2022-03-15 23:39:42 发布
最新推荐文章于 2022-03-15 23:39:42 发布
阅读量142 收藏
点赞数
分类专栏： vue 文章标签： Vue 组件 通信优化 .sync修饰符 事件处理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dyw3390199/article/details/114502873
版权

接上一章，之前的方法感觉还是有点繁琐，有没有简单一点的方法？有！

我们在外面父组件那里给dialog-info标签添加一个.sync装饰器：
在这里插入图片描述
后面的@statusChangeHide直接删掉：
在这里插入图片描述

下面的change方法也删掉：
在这里插入图片描述

并且从return的对象里面剔除，然后回到子组件DialogInfo中，把之前的handleClose回调函数里面的$emit语句删掉：
在这里插入图片描述
换成：

this.$emit("update:visible", false)

在这里插入图片描述
注意这里"update:visible"之间不能有空格！

在这里插入图片描述
在这里插入图片描述
这样同样可是实现想要的效果

Akimoto Hiroshi
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue父子组件传值案例
04-26
1. 单向数据流：Vue推崇单向数据流原则，即数据只能从父组件流向子组件，不鼓励子组件直接修改父组件的状态。 2. 避免直接修改props：子组件中不应该直接修改接收到的props，如果需要改变，应通过触发事件通知父组件...
Vue---组件传值总结（父子、子父、非父子三种传值方式）
COCOLI_BK的博客
12-18 733
前置说明：借鉴来源 1.单向数据流：只能父组件向子组件传递信息，子组件不能向父组件传递信息 2.在组件中使用从props传来的数据可以直接用this.xxx来获取 3.数据验证：在HTML中绝对不允许使用驼峰，因为HTML会把大写全部转化为小写。在props中可以用驼峰或短横线，在template和data、this.xxx中只能使用驼峰，这是因为在vue中短横线会被误认为减号，会报错。即............
vue组件值传递--单向数据流
weixin_43117402的博客
04-16 402
由于组件 HelloVue 中 data 里的数据 str 是固定的，所以页面上显示的时候内容就是一样的： 而实际开发中，复用的组件里显示的内容往往是不同的，比如下面的图片中显示的每个文章介绍其实用的是一个组件，但是每个介绍的内容却是不同的，这就需要从父组件中传递不同的内容给子组件。 那么如何从父组件中把内容传给子组件呢？ prop 的使用方法 基础使用 当父组件给子组件的 prop 传递一个...
Vue04---父子组件之间传值、非父子组件传值
m0_37756431的博客
03-10 932
一、父子组件之间传值 1、单向数据流 父组件向子组件传值，子组件不可修改父组件的传值。 父组件向子组件传值是通过参数props方式，子组件向父组件传值是通过事件触发$emit的方式 父传子 具体实现：父组件通过import引入子组件，并注册，在子组件标签上添加要传递的属性，子组件通过props接收，接收有两种形式一是通过数组形式[‘要接收的属性’ ]，二是通过对象形式{ }来接收，对象形式可以设置要传递的数据类型和默认值，而数组只是简单的接收 子传父 具体实现：子组件通过..
怎么理解vue是单向数据流
q123q9的博客
03-15 4158
vue单向数据流
怎样理解 Vue 的单向数据流？
LuckXinXin的博客
03-21 1356
答： 首先，单项数据流是发生在父子组件传值的时候，所有的 prop 使得其父子 prop 之间形成了一个单向下行绑定。 也就是：父级 prop 的更新会向下流动到子组件中，但是反过来则不行。这样会防止从子组件意外改变父级组件的状态。 而且，每次父级组件发生更新时，子组件中所有的 prop 都将会刷新为最新的值。所以，在一个子组件内部改变 prop，Vue 会在浏览器的控制台中发出警告。子组件想修改...
快速了解Vue父子组件传值以及父调子方法、子调父方法
10-15
Vue.js 是一款流行的前端框架，它的核心特性之一就是组件化。在 Vue 中，父子组件间的...同时，使用`props`向下传递数据时，要遵循单向数据流原则，即数据应由父组件流向子组件，而子组件不应直接修改父组件的状态。
vue 进阶之实现父子组件间的传值
10-17
这里，`number`变量在子组件内部是可变的，而`count`则是只读的，因为它来自父组件，遵循Vue的单向数据流原则。 然而，如果需要在子组件中改变父组件的状态，我们必须使用事件。例如，我们可以在子组件中增加一个...
vue单页开发父子组件传值思路详解
08-27
本篇将详细讲解 Vue 父子组件如何进行值的传递。 首先，我们要理解 Vue 中组件的基本结构。组件是 Vue 应用的核心构造块，可以被复用，提高了代码的可维护性和可重用性。组件分为父组件（包含其他组件的组件）和子...
Vue非父子组件之间传值
01-08
由于Vue的单向数据流原则，直接修改父组件的值在子组件中是不被推荐的，因此需要采取其他方法来实现实现组件间的数据传递。这里介绍的就是使用“Bus”（或称为事件总线、发布订阅模式或观察者模式）来解决这个问题。...
vue父子组件传值之单向数据流以及解决方案
Hiroshi's
01-09 495
<div id="app"> <counter :count="111"></counter> <counter :count="222"></counter> </div> <script> var counter = { props: ['count'], template: '<div @click="han
vue父子组件传值之单向数据流非常详细的讲解(一)
Hiroshi's
03-07 834
有个DialogInfo的组件： 父组件向子组件传值visible 点击新增的时候会把dialogTableVisible的值改变： 这样的话运行时候会报错： 解决办法： <template> <el-dialog title="收货地址" :visible.sync="visible_flag" v-on:close="handleClose" :modal-append-to-body="false"> <el-table> <el
vue总结系列 ---- 在组件上的v-model单向数据流
qq_39148344的博客
04-09 915
背景 目前是在复习vue原理的过程中，前端负责人知道我最近在复习vue，跟我说要我看组件上的v-model,我一听本来是不想放在心上的，刚好那天晚上没什么事干想看一下，毕竟负责人，还是要尊重一下，每想到这样一看，与我最近看的单向数据流，连起来了，哇！大佬就是大佬。。下面就让我们来看一下v-model吧！ v-model的作用？ 这个问题一问：大家都会说是双向绑定，但是问题来了，他是双向绑定吗...
sync分析之为啥el-dialog中的visible需要使用.sync
热门推荐
吴冬雪的博客
08-02 1万+
在使用element-ui 中的dialog组件时，发现visible属性在使用时需要添加.sync才生效。 我们先自己创建一个dialog组件，如下 当我们点击关闭按钮时，会发生警告 原因就是在VUE中，prop的传递是单向下行绑定的，也就是说只能父传给子，不能反过来。 虽然在demo中子组件直接修改visible也能够关闭窗口，但是该变量不能传给父组件，所以并不建议这么做，（如果您任性，觉得父组件拿到这个变量也没用，那您尽管在子组件中修改，但是小心父组件的入参变化时会覆盖你的修改） 现
Vue（三）-组件间传值和双向数据流实现
sunny_jiangsu的博客
11-19 774
Vue父子组件间数据流是单向的，即父-》子，虽然是支持双向数据流的，但是不推荐。 本章主要讲组件间传值：父子组件，兄弟组件，v-model传值，父子组件间双向数据流实现。 1. 父组件–》子组件 父组件 <todo-item v-for="(item, index) of list" :content="item" :index="index" ...
Vue 单向数据流 之 对象
任重道远
05-20 581
父组件将 数据(Object) 传递到子组件 子组件直接使用这个对象，并修改这个对象，会影响到父组件中的对象； 子组件通过data，将父组件传递过来的对象转换成本地数据，修改对象依然会影响到父级数据，因为对象是引用数据类型，如下图所示； props: ['obj'], data(){ return { iObj: this.obj } } 所以就需要让本地对象跟父级对象彻底断绝联系...
Vue笔记-组件Component-组件通信之单向数据流和props数据验证
一只勤勤恳恳的小前端
03-18 244
1、 单向数据流 父->子 props接受普通数据类型时：父组件数据影响子组件，子组件的数据改变不会影响父组件 ​props接受对象或数组这种引用数据类型：子组件直接改变props接受值，是会改变父组件里面的数据的，因为传递过来的时引用的地址而不是单纯的拷贝 注意在 JavaScript 中对象和数组是通过引用传入的，所以对于一个数组或对象类型的 prop 来说，在子组件中改变变更这个对象或数组本身将会影响到父组件的状态。 子级直接修改父级传过来的引用地址是不被允许的(直接赋值)
2021-04-19 - React的单向数据流与Vue的双向绑定
william_n的博客
04-19 1370
主要用于对比react与vue的数据流向，以及数据绑定的区别，从而更加好地理解前端开发框架， 以及工作中高效准确地使用它们进行开发。
vue2父子组件传值
最新发布
06-14
- **单向数据流**：父组件向子组件传递数据使用`props`。父组件定义props时，需要指定类型，子组件通过`props`接收数据。例如： ```javascript // 父组件 // 子组件 props: { value: { type: String, ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值