Vue中的父子组件传值.sync

更新时间：2023年12月20日 16:36:28 作者：小晨想好好学习

这篇文章主要介绍了Vue中的父子组件传值.sync,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue父子组件传值.sync

传统的父子组件之间传值

父组件通过 :变量=“xxx”将值传给子组件

子组件通过props进行接收

但是子组件只有读的属性，不可以对数据进行更改，所以$emit传回父组件，由父组件对数据进行修改

//父组件
<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的那一步

好了，以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue前端柱状图实例(叠状条形图)
这篇文章主要介绍了Vue前端柱状图实例(叠状条形图)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-03-03
Element-Plus之el-col与el-row快速布局
el-col是el-row的子元素,下面这篇文章主要给大家介绍了关于Element-Plus之el-col与el-row快速布局的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-09-09
基于Vue2x的图片预览插件的示例代码
本篇文章主要介绍了基于Vue2x的图片预览插件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-05-05
vue点击按钮跳转到另一个vue页面实现方法
这篇文章主要给大家介绍了关于vue点击按钮跳转到另一个vue页面的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
2023-08-08
vue中关于confirm确认框的用法
这篇文章主要介绍了vue中关于confirm确认框的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-08-08
详解Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on
Vue.js的指令是以v-开头的，它们作用于HTML元素，指令提供了一些特殊的特性。这篇文章主要介绍了Vue的常用指令v-if, v-for, v-show,v-else, v-bind, v-on 的相关知识,需要的朋友可以参考下
2018-10-10
一篇文章搞懂Vue3中如何使用ref获取元素节点
过去在Vue2中,我们采用ref来获取标签的信息,用以替代传统 js 中的 DOM 行为,下面这篇文章主要给大家介绍了关于如何通过一篇文章搞懂Vue3中如何使用ref获取元素节点的相关资料,需要的朋友可以参考下
2022-11-11
vue3使用video.js播放m3u8格式视频的操作指南
有时候我们需要播放 m3u8 格式的视频,或者实现视频播放器更多定制化需求,HTML 的 video 元素无法实现这些需求,这时候可以考虑使用 Video.js,本文给大家介绍了vue3使用video.js播放m3u8格式视频的操作指南,需要的朋友可以参考下
2024-07-07
详解Vue的组件注册
组件是Vue.js最强大的功能之一。组件可以扩展HTML元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能,需要的朋友可以参考下
2023-05-05
Vue.directive 实现元素scroll逻辑复用
这篇文章主要介绍了Vue.directive 实现元素scroll逻辑复用功能，文中给大家提到元素实现滚动的条件有两个，具体内容详情大家参考下本文
2019-11-11