广告
返回顶部
首页 > 资讯 > 前端开发 > 其他 >vue sync出错怎么办
  • 712
分享到

vue sync出错怎么办

.syncVue 2023-05-14 21:05:05 712人浏览 泡泡鱼
摘要

本教程操作环境:windows10系统、Vue 3版、Dell G3电脑。vue sync出错怎么办?Vue修饰符.sync(Avoid mutating a prop directly since .......报错的一种解决方案)前言我

vue sync出错怎么办

教程操作环境:windows10系统、Vue 3版、Dell G3电脑。

vue sync出错怎么办?

Vue修饰符.sync(Avoid mutating a prop directly since .......报错的一种解决方案)

前言

我们都知道,子组件在修改父组件传过来的props时会报错,如下图

一、什么是.sync

当我们跨父子组件想要修改数据时,需要父子组件通讯,父传子 :在子组件绑定数据然后子组件用props接收,而子传父,则是父组件需要在组件上绑定事件,子组件使用$emit传递事件;这样的数据修改写起来显得有些麻烦,.sync这个修饰符就是一个缩写以上子组件修改父组件数据的写法

二 .sync的使用

语法:

:props名称 . sync=“props值”
$emit( “ update:props名称 ” ,新值)

父组件

<child-dialog :name.sync="userName"></child-Dialog>

子组件

<el-button type="primary" @click="changeName('王五')">修改名字</el-button>
methods:{
changeName(newName){
//修改父组件传过来的数据
this.$emit('update:name', newName)
}
}
:name.sync修饰符其实是以下代码的缩写
@update:name="val => name= val"

三、其他 props双向邦定的方法

传递对象

把需要传递的基本数据类型值放入对象中,子组件中修改对象中的值就不会报错了,原理是对象是复杂数据类型,子组件接收到的对象和父组件传递的对象是共用一个内存地址的,故可实现双向邦定的效果。

父组件

<div>
<child-dialog :toChildObj="obj"></child-Dialog>
<p>
<span>名字:</span>{{name}}
</p>
</div>
export default {
data(){
return{
obj:{
name: "张三"
}
}
}
}

子组件

<el-button type="primary" @click="changeName('王五')">修改名字</el-button>
export default {
props:{
toChildObj:{
type:Object,
default:{}
},
},
data(){
return{}
},
methods:{
changeName(newName){
//修改父组件传过来的数据
this.toChildObj.name = newName;
}
}
}

以上就是vue sync出错怎么办的详细内容,更多请关注编程网其它相关文章!

--结束END--

本文标题: vue sync出错怎么办

本文链接: https://www.lsjlt.com/news/206143.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue sync出错怎么办
    本教程操作环境:Windows10系统、Vue 3版、Dell G3电脑。vue sync出错怎么办?Vue修饰符.sync(Avoid mutating a prop directly since .......报错的一种解决方案)前言我...
    99+
    2023-05-14
    .sync Vue
  • vue sync出错如何解决
    这篇文章主要讲解了“vue sync出错如何解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“vue sync出错如何解决”吧!vue sync出错的解决办法:1、修改父组件传过来的数据,代...
    99+
    2023-07-04
  • Vue中数据绑定出错怎么办
    这篇文章将为大家详细讲解有关Vue中数据绑定出错怎么办,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。Vue关于数据绑定出错错误提示:相对应的代码:<input&nb...
    99+
    2022-10-19
  • hkcmd.exe出错怎么办
    如果您遇到了hkcmd.exe出错的问题,可以尝试以下解决方法:1. 重新启动计算机:有时候简单地重新启动计算机就可以解决一些临时的...
    99+
    2023-08-19
    hkcmd.exe
  • PHP出错 warning怎么办
    本文操作环境:windows7系统、PHP5.5版、DELL G3电脑PHP出错 warning怎么办?解决PHP显示Warning和Notice等问题PHP在安装后,会在php.ini 文件中设置报错、提醒、警告等方式的出现,这样的方式可...
    99+
    2020-07-13
    PHP warning
  • php split出错怎么办
    本教程操作环境:windows7系统、PHP8.1版、Dell G3电脑。php split出错怎么办?PHP的split()非常方便,但是PHP530后,不建议继续使用split(),在使用上会出现警告讯息.split()不建议使用的原因...
    99+
    2022-10-20
  • Vue打包之后文件路径出错怎么办
    这篇文章将为大家详细讲解有关Vue打包之后文件路径出错怎么办,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。这里以vue-cli创建的项目为例1、文件路径不对找到confi...
    99+
    2022-10-19
  • mysql复制出错怎么办
    小编给大家分享一下mysql复制出错怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!mysql复制又出错了,同事在用navi...
    99+
    2022-10-19
  • react安装出错怎么办
    本教程操作环境:Windows10系统、react18.0.0版、Dell G3电脑。react安装出错怎么办?react 安装及安装报错解决办法1. 安装安装react可以使用create-react-app还可以用webpack和rol...
    99+
    2023-05-14
    React
  • laravel中gulp出错怎么办
    这篇文章主要为大家展示了“laravel中gulp出错怎么办”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“laravel中gulp出错怎么办”这篇文章吧。laravel gulp出错的解决办法:...
    99+
    2023-06-22
  • PDO连接出错怎么办
    小编给大家分享一下PDO连接出错怎么办,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!  1.确认PDO开启    PDO的开启必须...
    99+
    2023-06-06
  • Win10系统0xv0000098出错怎么办
    如何在Win10系统中修复错误码0xv0000098(或0xc0000098)?。按照以下处理流程,可以解决使用Win10系统时遇到的0xc0000098问题。大家过来看看吧。在出现此类问题之后再进入启动程序流程,然后计...
    99+
    2023-07-19
  • php 加密后出错怎么办
    本文操作环境:Windows7系统、PHP7.1版、Dell G3电脑。php 加密后出错怎么办?为什么加密后的文件无法使用?首先我们要学会排除出错的原因,现就常见问题与大家说明交流,供参考:1、二进制问题?因为我们系统加密的数据为二进制数...
    99+
    2018-07-28
    php 加密
  • php连接sqlserver出错怎么办
    本文操作环境:windows7系统、PHP7.1版、DELL G3电脑php连接sqlserver出错怎么办关于php连接sqlserver的问题用php连接sqlserver2000应该注意的几点配置phpa、打开php.in将 exte...
    99+
    2017-11-13
    php sqlserver
  • mysql出现1045错误怎么办
    这篇文章给大家分享的是有关mysql出现1045错误怎么办的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 --mysql5.6,安装好后进行登录出现 [root@mytest_...
    99+
    2022-10-18
  • java出现错误1603怎么办
    安装Java错误1603错误情况以前安装过java1.7,现在想升级到1.8版本,卸载了1.7,但是在安装java1.8的时候,jdk可以顺利安装,额外的jre却频频提示1603错误。解决办法jre是由java编写的,会调用java程序来安...
    99+
    2020-06-08
    java入门 java 错误 1603
  • 域名解析出错怎么办
    这篇文章主要讲解了“域名解析出错怎么办”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“域名解析出错怎么办”吧! 域名解析出错的原因有很多方面,比如空间因素导致域名难以解析或者是域名服...
    99+
    2023-06-06
  • php导出excel出现500错误怎么办
    本文操作环境:windows10系统、php 7、thinkpad t480电脑。想必很多小伙伴都遇到过导出excel的问题,也许我们平时在使用phpexcel类时觉得很方便。但是你会发现在导出大量数据的时候可就没那么简单了,往往会导出时会...
    99+
    2018-06-06
    php excel 500
  • win8.1开机出错pniopcac.exe报错该怎么办?
    win8.1系统安装STEP7 Micro/Win V4.0 SP9,安装完后每次开机都提示Assertion !如下图所示。 Program:pniopcac.exe File:..........co...
    99+
    2022-06-04
    报错 pniopcac exe
  • oracle出现ORA-14402报错怎么办
    本篇内容介绍了“oracle出现ORA-14402报错怎么办”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!分区表分区字段的update操作默...
    99+
    2023-06-06
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作