详解vue父子组件状态同步的最佳方式


Posted in Javascript onSeptember 10, 2020

哈喽!大家好!我是木瓜太香,一位老牌儿前端工程师,平时我们在使用 vue 开发的时候,可能会遇到需要父组件与子组件某个状态需要同步的情况,通常这个是因为我们封装组件的时候有一个相同的状态外面要用,里面也要用,今天我们就来看看怎么优雅的解决这个问题吧!
一般来说我们实现这个功能,只需要父组件通过 props 传递给子组件就好了,但是理想很丰满,现实很骨感,如果我们直接在子组件更改传进来的 props ,不出意外浏览器会给你一坨大红色的报错,因为在 vue 中我们的数据流动是自上而下的,而子组件直接更改父组件传来的 props 则是自下而上的数据流动,这是 vue 不允许的。

所以通常我们的解决办法是,父组件通过 props 传入状态给子组件,子组件通过 props 来初始化另外一个内部的状态,子组件每次更改状态之后都通知父组件,然后由父组件来更改自己的状态,其实就是 props on emit 的应用,接下来我们来上代码。

父组件 Father.vue

<template>
  <div class="father">
    <h1>父组件维护的状态:{{food}}</h1>
    <son :food="food" @update:food="f => food = f"></son>
  </div>
</template>

子组件 Son.vue

<template>
  <div class="son">
    <h2>子组件中维护的状态:{{innerFood}}</h2>
    <button @click="innerFood = '100斤牛肉'">点击更改子组件状态</button>
  </div>
</template>
<script>
  export default {
    data () {
     return {
       innerFood: this.food
     } 
    },
    props: {
      food: String
    },
    watch: {
      innerFood (nv) {
        this.$emit("update:food",nv)
      }
    }
  }
</script>

可以看到我们上述的写法,其实是维护了父子组件中的不同的两个状态,我们做的工作只是将这两个状态同步了,这种写法没有任何问题,其实对于子组件的部分我们也可以通过 computed 来实现,下面我们来看一看另一种子组件内维护同步状态的方法:

子组件 Son.vue 的另一种写法

<template>
  <div class="son">
    <h2>子组件中维护的状态:{{innerFood}}</h2>
    <button @click="innerFood = '100斤牛肉'">点击更改子组件状态</button>
  </div>
</template>
<script>
  export default {
    props: {
      food: String
    },
    computed: {
      innerFood: {
        get () {
          return this.food
        },
        set (nv) {
          this.$emit("update:food",nv)
        }
      }
    }
  }
</script>

好了,两种写法我们都已经演示完毕,现在我们来优化一下父组件中的写法。

父组件中可以看到我们之前在上面绑定了一个 update:food 事件,并且使用箭头函数做了一个赋值,其实这里我们可以稍微优化一下,不要箭头函数直接赋值,因为我们触发的是自定义事件,而我们触发的时候给的第一个参数就是新值,我们可以直接通过 $event 拿到这个值,所以可以写成如下形式:

优化后的父组件

<template>
  <div class="father">
    <h1>父组件维护的状态:{{food}}</h1>
    <son :food="food" @update:food="food = $event"></son>
  </div>
</template>

到这里你以为就结束了?其实我们还可以更近一步,只要满足我们以上的事件命名方式,我们实际上可以使用 sync 修饰符代替事件的绑定,也就是我们不用写事件绑定了,但是子组件内部的事件触发依然不能少,最终优化的结果如下:

<template>
  <div class="father">
    <h1>父组件维护的状态:{{food}}</h1>
    <son :food.sync="food"></son>
  </div>
</template>

到此我们就真的完成了父子组件的同步,当然在子组件中维护一个状态不一定是必须的,如果我们只用父组件传给我们的 props 做展示,而子组件没有对这个 props 直接更改的行为,那么我们就不用在子组件创建另外一个状态,我们子组件想改他的时候只需要在合适的时机提交合适的事件即可,但是有一种情况我们不得不在子组件中创建另一个状态,就是我们父组件传入的状态在子组件中用于 v-model 这种双向数据绑定的功能时,由于 v-model 会自动更改值所以直接填入从父组件接受的 props 就不合适了。

到此这篇关于详解vue父子组件状态同步的最佳方式的文章就介绍到这了,更多相关vue父子组件状态同步 内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
ext combox 下拉框不出现自动提示,自动选中的解决方法
Feb 24 Javascript
FusionCharts图表显示双Y轴双(多)曲线
Nov 22 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
JavaScript操作XML文件之XML读取方法
Jun 09 Javascript
js中对函数设置默认参数值的3种方法
Oct 23 Javascript
JavaScript中正则表达式判断匹配规则及常用方法
Aug 03 Javascript
基于jQuery中ajax的相关方法汇总(必看篇)
Nov 08 jQuery
js 判断一个数字是不是2的n次方幂的实例
Nov 26 Javascript
vue 插值 v-once,v-text, v-html详解
Jan 19 Javascript
react.js组件实现拖拽复制和可排序的示例代码
Aug 20 Javascript
vue权限管理系统的实现代码
Jan 17 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
vue使用echarts实现水平柱形图实例
Sep 09 #Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
Sep 09 #Javascript
vue 项目引入echarts 添加点击事件操作
Sep 09 #Javascript
Vue this.$router.push(参数)实现页面跳转操作
Sep 09 #Javascript
Vue页面跳转传递参数及接收方式
Sep 09 #Javascript
微信小程序实现身份证取景框拍摄
Sep 09 #Javascript
vue实现点击按钮“查看详情”弹窗展示详情列表操作
Sep 09 #Javascript
You might like
php 清除网页病毒的方法
2008/12/05 PHP
php编写一个简单的路由类
2011/04/13 PHP
php图片上传存储源码并且可以预览
2011/08/26 PHP
php四种基础算法代码实例
2013/10/29 PHP
php以fastCGI的方式运行时文件系统权限问题及解决方法
2015/05/11 PHP
Yii2框架引用bootstrap中日期插件yii2-date-picker的方法
2016/01/09 PHP
PHP实现根据时间戳获取周几的方法
2016/02/26 PHP
总结一些js自定义的函数
2006/08/05 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
node.js中的emitter.on方法使用说明
2014/12/10 Javascript
jQuery手机拨号界面特效代码分享
2015/08/27 Javascript
Bootstrap轮播图的使用和理解4
2016/12/14 Javascript
AngularJS+Bootstrap3多级导航菜单的实现代码
2017/08/16 Javascript
JS实现的集合去重,交集,并集,差集功能示例
2018/03/13 Javascript
jQuery实现checkbox全选、反选及删除等操作的方法详解
2019/08/02 jQuery
Python使用Socket(Https)Post登录百度的实现代码
2012/05/18 Python
图文讲解选择排序算法的原理及在Python中的实现
2016/05/04 Python
python批量赋值操作实例
2018/10/22 Python
Numpy截取指定范围内的数据方法
2018/11/14 Python
python同步两个文件夹下的内容
2019/08/29 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
Windows环境下Python3.6.8 importError: DLLload failed:找不到指定的模块
2020/11/01 Python
魅力惠奢品线上平台:MEI.COM
2016/11/29 全球购物
洲际酒店集团美国官网:IHG美国
2017/11/16 全球购物
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
方正Java笔试题
2014/07/03 面试题
品酒会策划方案
2014/05/26 职场文书
公司车辆管理制度
2015/08/04 职场文书
2016暑期社会实践新闻稿
2015/11/25 职场文书
五年级作文之成长
2019/09/16 职场文书
react 项目中引入图片的几种方式
2021/06/02 Javascript
Python 语言实现六大查找算法
2021/06/30 Python
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技