vue.js 父子组件间 props 数据同步处理

常见的场景：

在一个vue组件A中，使用另外一个组件B。A将自己的数据通过B组件的Props属性（propX）传递到B组件实例内部，B组件内部会修改该Props属性（propX）的值，此时在A组件内部的数值是否会收到影响呢？如下：

<template>
............
<el-dialog title="XXXX" :visible="show">...............
</el-dialog>
.............
</template><script>
export default {name: "A",data() {return {show:true};},methods:{............}
}

上面的组件A中使用了 el-dialog，并绑定了 el-dialog 的 visible值为show。在程序运行起来后 el-dialog 默认弹出，手动关闭 el-dialog 此时在组件A中show的值会是什么呢？仍然是true，并不是false。

造成这种问题的原因就是 el-dialog 内部对 visible 属性的修该，并不能同步回到父组件A中的show。要解决上面的 el-dialog 不能同步回 visible 变化的问题很简单：

<el-dialog title="XXXX" :visible.sync="show">...............
</el-dialog>

这样 el-dialog 对 visible 的修改就能同步到父组件A的show上。

问题完美解决了，那到底是如何解决的呢？不如打开 el-dialog 的源码学习一下：

hide(cancel) {if (cancel !== false) {this.$emit('update:visible', false);this.$emit('close');this.closed = true;}}

实际上是在关闭时调用hide函数通过this.$emit('update:visible', false)来更新 visible 的值。

既然如此，我们自定义的组件也可以如法炮制，使其Props属性支持sync

子组件：

<template><div><button @click="click">点我</button></div>
</template>
<script>
export default {name:"cx",props:{propx:{type:Boolean,default:false}},data(){return {}},methods:{click(){this.$emit("update:propx",false)}}}
</script>

父组件：

<template><div id="app"><cx :propx.sync="v"></cx></div>
</template><script>import cx from './packages/cx'
export default {name: 'app',components:{"cx":cx},data () {return {v:true}},methods:{}
}
</script>

效果：

点击后：

转载于:https://www.cnblogs.com/dw039/p/vue.html

vue.js 父子组件间 props 数据同步处理相关推荐

Vue.js 父子组件通信的十种方式；告诉世界前端也能做 AI；你可能不知道的14个JavaScript调试技巧...
记得点击文章末尾的"阅读原文"查看哟~ 下面先一起看下本周的摘要吧~ 想了解老用户如何参与阿里云双十一1折拼团特惠主机的,可以看第二条推送,文中提供了两种方法~,一起看看本周有哪些 ...
html中的父子通信代码,Vue.js 父子组件通信的十种方式
面试官:Vue 中父子组件通信有哪些方式? 自己先想一分钟. 无可否认,现在无论大厂还是小厂都已经用上了 Vue.js 框架,简单易上手不说,教程详尽,社区活跃,第三方套件还多.真的是前端开发人员必备 ...
Vue3基础——条件渲染、列表渲染、事件事件修饰符、父子组件间的数据传递、生命周期钩子
文章目录 p12 条件渲染v-if与v-show p13 列表渲染v-for p14 事件与参数和事件修饰符 p15 表单的数据双向绑定 p16 组件与父组件传递数据给子组件 -- 方式props ...
VUE：父子组件间传参、子组件传值给父组件、父组件传值给子组件
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. Vue是一个轻量级的渐进式框架,对于它的一些特性和优点在此就不做赘述,本篇文章主要来探讨一下Vue子 ...
vue引入id3_Vue页面间传值，客户端数据存储，以及父子组件间props传值
初学Vue,遇到了页面传值的问题,大概网上学习了解了一下,在此跟大家分享一下学习心得,欢迎批评指正. 一.参数传值如果是简单的页面传值,比如传一个id到详情页等等,推荐使用参数传值. 这里页面是通过 ...
组件间数据交互——父组件向子组件传值（ props属性值类型）子组件向父组件传值-携带参数 || 非父子组件间传值
父组件向子组件传值 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
初识 Vue（18）---（非父子组件间的传值）
非父子组件间的传值常一个应用会以一棵嵌套的组件树的形式来组织:将一个大组件进行拆分下图这种情况的组件间传值(父子组件间传值) 方法:父组件通过 Props 向子组件传值,子组件通过事件触发向父组件 ...
VUE组件间的数据传递
众所周知,Vue 是基于组件来构建 web 应用的.组件将模块和组合发挥到了极致.Vue 是虽说吸取了 AngularJs 的 MVVM的思想,但是它是单向数据流的,也就是说子组件无法直接改变父组件状 ...
【Vue父子组件间通信】
Vue父子组件间通信父子组件通信父传子 (props) 子传父 (自定义事件) 完整代码效果父子组件通信父传子 (props) (1)在父组件中使用子组件时,给子组件一个自定义属性,这个属性 ...
【前端面试题之Vue篇】(1)父子组件通信方式Props/$emit
文章目录前言一.父组件向子组件传值 1.Props定义 2. Props 用法 (1)路由里注册父子组件 (2)父组件里引入子组件,并且注册子组件 (3)子组件利用props接受父组件传过来的值 ...

vue.js 父子组件间 props 数据同步处理

vue.js 父子组件间 props 数据同步处理相关推荐

最新文章

热门文章