父子传参 .sync

最新推荐文章于 2023-07-19 15:20:30 发布

CV工程师!!

最新推荐文章于 2023-07-19 15:20:30 发布

阅读量240

点赞数 1

分类专栏： Vue 文章标签： vue.js 前端 javascript css css3

本文链接：https://blog.csdn.net/m0_65607651/article/details/130715702

版权

Vue 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

文章讲述了在Vue框架中，传统的父子组件间通过props传递数据和使用$emit更新父组件状态的方式。Vue的单向数据流原则限制了子组件直接修改父组件数据。然而，.sync修饰符提供了一种简化的双向绑定方式，允许子组件通过$emit的update:propName事件直接更新父组件对应的属性，减少了父组件处理$emit的步骤。

摘要由CSDN通过智能技术生成

传统的父子组件之间传值，父组件通过 :变量=“xxx”将值传给子组件，子组件通过props进行接收。但是因为vue有单向数据流子组件只有读的属性,不可以对数据进行更改,所以$emit传回父组件，由父组件对数据进行修改今天.sync可以实现在子组件中修改父组件值

//父组件
<template>
  <div class="content">
     <btn :btnName='num' @changeFn= changeFn></btn>
  </div>
</template>

子组件
export default {
  name: 'btn',
  props: {
    btnName:{
        type : [String,Number],
        required: true
    }
  },
  methods: {
      changeNum(){
          this.$emit('changeFn',888)
      }
  },
}

.sync 相当于上面的父子组件传值简写父子双向传值语法糖
父组件在传入子组件的数据后加上.sync 不需要在对子组件的$emit进行接收

<template>
  <div class="content">
     <btn :btnName.sync='num' ></btn>
  </div>
</template>

子组件$emit传回的不再是函数而是 update:父组件传过来的变量名称

<script>
export default {
  name: 'btn',
  props: {
    btnName:{
        type : [String,Number],
        required: true
    }
  },
  methods: {
      changeNum(){
          this.$emit('update:btnName',888)
      }
  },
}
</script>

总的来说，.sync 使得父组件少走了处理 $emit的那一步