圆月山庄资源网

详解vue父子组件状态同步的最佳方式
网络编程 2024/12/23 佚名
3 2
圆月山庄资源网 Design By www.vgjia.com

哈喽！大家好！我是木瓜太香，一位老牌儿前端工程师，平时我们在使用 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父子组件同步
圆月山庄资源网 Design By www.vgjia.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
www.vgjia.com 圆月山庄资源网
139,976互联网资源
144,792高清电影
21,817无损音乐
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接