详解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 相关文章推荐
js 调整select 位置的函数
Feb 21 Javascript
javascript 火狐(firefox)不显示本地图片问题解决
Jul 05 Javascript
JS中FRAME的操作问题实例分析
Oct 21 Javascript
jquery 插件实现瀑布流图片展示实例
Apr 03 Javascript
JavaScript返回网页中锚点数目的方法
Apr 03 Javascript
jquery判断复选框是否被选中的方法
Oct 16 Javascript
Node.js包管理器Yarn的入门介绍与安装
Oct 17 Javascript
微信小程序开发之视频播放器 Video 弹幕 弹幕颜色自定义实例
Dec 08 Javascript
JS实现向iframe中表单传值的方法
Mar 24 Javascript
深入浅析JSONAPI在PHP中的应用
Dec 24 Javascript
Vue中img的src是动态渲染时不显示的解决
Nov 14 Javascript
详解Vue项目的打包方式(生成dist文件)
Jan 18 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制作静态网站的模板框架(四)
2006/10/09 PHP
新浪SAE云平台下使用codeigniter的数据库配置
2014/06/12 PHP
gearman中任务的优先级和返回状态实例分析
2020/02/27 PHP
[原创]保存的js无法执行的解决办法
2007/02/25 Javascript
js利用Array.splice实现Array的insert/remove
2009/01/13 Javascript
js验证IP及子网掩码的合法性有效性示例
2014/04/30 Javascript
Jquery中扩展方法extend使用技巧
2014/08/24 Javascript
JS实现部分HTML固定页面顶部随屏滚动效果
2015/12/24 Javascript
常用JS图片滚动(无缝、平滑、上下左右滚动)代码大全(推荐)
2016/12/20 Javascript
Node.js中Bootstrap-table的两种分页的实现方法
2017/09/18 Javascript
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
2018/10/12 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
解决vue单页面 回退页面 keeplive 缓存问题
2020/07/22 Javascript
[01:00:06]加油DOTA_EP01_网络版
2014/08/09 DOTA
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
浅谈Python的list中的选取范围
2018/11/12 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
python读取指定字节长度的文本方法
2019/08/27 Python
OpenCV 之按位运算举例解析
2020/06/19 Python
Python使用文件操作实现一个XX信息管理系统的示例
2020/07/02 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
英国最大的线上保健品零售商之一:Vitamin Planet
2016/12/01 全球购物
美国生日蛋糕店:Bake Me A Wish!
2017/02/08 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
Python如何实现单例模式
2016/06/03 面试题
机械工程师的岗位职责
2013/11/17 职场文书
英文演讲稿开场白
2014/08/25 职场文书
村干部群众路线教育活动对照检查材料
2014/10/01 职场文书
民主评议党员总结
2014/10/20 职场文书
年终工作总结范文2014
2014/11/27 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
作弊检讨书
2015/01/27 职场文书
员工工作失职检讨书范文!
2019/07/03 职场文书